参考如下:
https://element.eleme.io/#/zh-CN/component/menu
先直接遍历路由列表,显示需要显示的导航元素。
<el-menu :default-active="$route.path" mode="horizontal" @select="handleSelect">
<template v-for="(item,index) in this.$router.options.routes">
<el-menu-item :index="item.path" :key="index" >{{item.name}}</el-menu-item>
</template>
</el-menu>
@select="handleSelect"
设置选择的方法
handleSelect (key, keyPath) {
console.log(key, keyPath)
this.$router.push(key)
}
选择方法直接跳转到指定的路由
效果如下: