el-menu-item 跳转 代码示例
时间: 2023-11-22 22:29:53 浏览: 31
下面是一个 el-menu-item 跳转的代码示例:
```html
<el-menu-item index="/home">
<router-link to="/home">
<i class="el-icon-menu"></i>
<span>首页</span>
</router-link>
</el-menu-item>
```
其中,`<router-link>` 是 Vue Router 提供的组件,用于实现路由跳转。`to` 属性指定跳转的路径,`<i>` 元素和 `<span>` 元素是菜单项的图标和文本内容。`index` 属性指定菜单项的索引,可以在菜单的 `default-active` 属性中使用。
相关问题
el-menu-item怎么配置路由跳转
在 Element UI 中,可以使用 `el-menu-item` 组件来实现菜单项,并使用 `router-link` 组件来实现路由跳转。具体的实现方式如下:
1. 在 Vue Router 中定义路由映射,将菜单项的路径与具体的组件进行关联。
2. 在模板中使用 `el-menu-item` 组件来生成菜单项,并使用 `router-link` 组件来实现路由跳转。
示例代码如下:
```html
<template>
<div>
<el-menu default-active="home" mode="horizontal">
<el-menu-item index="home">
<router-link to="/">首页</router-link>
</el-menu-item>
<el-menu-item index="about">
<router-link to="/about">关于我们</router-link>
</el-menu-item>
<el-menu-item index="contact">
<router-link to="/contact">联系我们</router-link>
</el-menu-item>
</el-menu>
<router-view></router-view>
</div>
</template>
<script>
export default {
// ...
};
</script>
```
在上面的示例中,使用 `el-menu` 组件来生成菜单,使用 `router-link` 组件来实现路由跳转。在 `el-menu-item` 组件中,使用 `index` 属性来指定菜单项的唯一标识符,并将其与路由路径进行关联。在 `router-link` 组件中,使用 `to` 属性来指定跳转的路由路径。在组件的模板中使用 `router-view` 组件来显示当前路由匹配的组件。
Vue el-menu-item实现路由跳转
Vue el-menu-item组件可以通过绑定@click事件来实现路由跳转。
示例代码:
```html
<el-menu-item index="/home" @click="goto('/home')">首页</el-menu-item>
```
```javascript
methods: {
goto(path) {
this.$router.push({ path: path })
}
}
```
在el-menu-item组件上绑定@click事件,当点击该菜单项时,执行goto方法。goto方法接收一个路由路径参数,使用Vue Router的push方法进行路由跳转。