<template>
<div class="nav">
<el-menu
:default-active="activeMenu"
class="el-menu-demo"
mode="horizontal"
@select="handleSelect"
router
active-text-color="#FF3300"
>
<el-menu-item index="/"> 首页
</el-menu-item>
<el-submenu index="2">
<template slot="title">项目管理</template>
<el-menu-item index="/major"> 重大项目</el-menu-item>
<el-menu-item index="/success"> 成功案例</el-menu-item>
</el-submenu>
<el-menu-item index="/invest">投资
</el-menu-item>
<el-menu-item index="/financing">融资
</el-menu-item>
<el-menu-item index="/pages/news">资讯</el-menu-item>
<el-menu-item index="/firm">会员中心</el-menu-item>
</el-menu>
</div>
</template>
<script>
export default {
computed: {
// 我们使用计算属性来获取到当前点击的菜单的路由路径,然后设置default-active中的值
// 使得菜单在载入时就能对应高亮
activeMenu() {
const route = this.$route
const { meta, path } = route
// 可以在路由配置文件中设置自定义的路由路径到meta.activeMenu属性中,来控制菜单自定义高亮显示
if (meta.activeMenu) {
return meta.activeMenu
}
return path
}
},
methods: {
handleSelect(key, keyPath) {
console.log(key, keyPath);
}
}
};
</script>
关于Vue+ElementUI 的导航菜单组件NavMenu,需要两次点击menu-item内容才能高亮显示得问题?
于 2020-08-06 18:48:35 首次发布