element导航菜单控制路由跳转⾸先复制官⽹的例⼦，在这基础上再修改成我们想要的样⼦。
<el-menu :default-active="activeIndex"class="el-menu-demo" mode="horizontal" @select="handleSelect">
<el-menu-item index="1">处理中⼼</el-menu-item>
<el-submenu index="2">
<template slot="title">我的⼯作台</template>导航菜单
<el-menu-item index="2-1">选项1</el-menu-item>
<el-menu-item index="2-2">选项2</el-menu-item>
<el-menu-item index="2-3">选项3</el-menu-item>
<el-submenu index="2-4">
<template slot="title">选项4</template>
<el-menu-item index="2-4-1">选项1</el-menu-item>
<el-menu-item index="2-4-2">选项2</el-menu-item>
<el-menu-item index="2-4-3">选项3</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="3" disabled>消息中⼼</el-menu-item>
<el-menu-item index="4"><a href="" rel="external nofollow" target="_blank">订单管理</a></el-menu-item> </el-menu>
<script>
export default {
data() {
return {
activeIndex: '1'
};
},
methods: {
handleSelect(key, keyPath) {
console.log(key, keyPath);
}
}
}
</script>
注意属性：
default-active：当前激活菜单的 index
router：是否使⽤ vue-router 的模式，启⽤该模式会在激活导航时以 index 作为 path 进⾏路由跳转
index：唯⼀标志，，类型为字符串，在每⼀个el-menu-item组件上都有⼀个编号，给default-active标记
使⽤菜单栏进⾏路由跳转：
<el-menu :default-active="this.$router.path"router mode="horizontal">
<el-menu-item v-for="(item,i) in navList" :key="i":index="item.name">
{{ item.navItem }}
</el-menu-item>
</el-menu>
数据：
data() {
return {
navList:[
{name:'/findProject',navItem:'发现项⽬'},
{name:'/communityActivity',navItem:'社区动态'},
{name:'/publishProject',navItem:'发布项⽬'},
{name:'/personalCenter',navItem:'个⼈中⼼'},
{name:'/manageCenter',navItem:'管理员中⼼'},
]
}
}
router.js
配置路由
使⽤菜单栏进⾏路由跳转有⼏个注意点：
1. 在el-menu加上router
2. index必须绑定路由的path，参考上⾯的例⼦，'/'不能少
3. default-active设为当前路由（this.$router.path），这样在路由变化的时候，对应的menu-item才会⾼亮
当this.$router.path等于el-menu-item标签中的index属性值时则该item为当前项，对应的menu-item才会⾼亮。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。