高亮问题
由于侧边栏可能不会把所有的路由name都丢上去展示，常常是展示一个父级菜单名，子路由菜单作为页面内的导航啥的。
常见的场景： 详情页
为此，我们路由名与侧边栏导航菜单的name相对应的处理就不太行了。
常见的做法就是在路由的meta里面添加一个activeRoute配置，里面标明需要高亮的侧边栏name
那么这个activeRoute怎么配置呢？
我个人觉得应该遵循父级优先的概念，如果子路由设置了，但是父级路由也设置了，那么以父级为准，也就是最上层路由为准，这样子集直接可以随便切换，不会影响侧边栏高亮，因为他有父级。
那么如果没有父级，就使用自己
遵循这个原则，我们对el-menu的default-active就需要这样做
<template>
...省略
<el-menu :default-active="activeName">
...省略
</el-menu>
...省略
</template>
<script>
export default {
data() {
activeName: "", //高亮的路由name
},
methods:{
//设置高亮的路由name
setActiveRouterName(matched = []) {
let name = "";
//最上层路由的activeMenu
const firstRoute = matched.find((route) => route.meta.activeMenu);
if (firstRoute) {
name = firstRoute.meta.activeMenu;
} else {
//没有activeMenu使用最后一个路由name
const lastRoutes = matched.filter((route) => route.name);
if (lastRoutes.length) name = lastRoutes.pop().name;
}
this.activeName = name;
},
},
created() {
//首次
this.setActiveRouterName(this.$route.matched);
},
watch: {
//监听路由
$route(val) {
this.setActiveRouterName(val.matched);
},
}
}
</script>
利用路由的matched层级数组，得到我们需要的数据
点击非子菜单的按钮，关闭已展开的菜单
这个是饿了么侧边栏的功能问题，做不到，我想了个新的方式。
假设我们能拿到侧边栏的导航菜单的数组
<template>
...省略
<el-menu >
<!--大概意思就是for循环，然后绑定click事件 -->
<el-menu-item v-for="item in sidebarData" :key="item.title" @click="onSidbarItemClick(item)">{{item.title}}</el-menu-item>
</el-menu>
...省略
</template>
<script>
export default {
data() {
sidebarData:[], //菜单数据
chindrenData: null, //有子菜单的菜单数组
},
methods:{
//菜单点击事件
onSidbarItemClick(menuData) {
//无子菜单
if (!menuData.children) {
this.onOffChindren();
}
},
//关闭子菜单
onOffChindren() {
//获取所有有子菜单数据
if (!this.chindrenData) {
this.chindrenData = this.sidebarData.filter((item) => item.children);
}
//获取菜单组件实例
if (!this.$refMenu) this.$refMenu = this.$refs["sidebarMenu"];
//关闭所有子菜单
this.chindrenData.forEach((item) => {
this.$refMenu.close(item.name);
});
},
},
}
</script>
如果item没有children，说明没有子菜单，那么他就触发onOffChindren方法，onOffChindren遍历所有子菜单，手动关闭即可。
逻辑简单。
如果除了侧边栏，你还有其他点击进入路由的按钮，那么侧边栏就没法自动关闭已展开的菜单了，你需要把onOffChindren的方法抛出去，比如事件bus，或者vuex，或者通过拿到导航的实例，再触发，这个就看自己的项目需求了。
版权申明
本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可，禁止转载。
