Element-ui学习笔记之NavMenu导航菜单刷新高亮实现
踩坑
最开始想的是通过将当前:default-active="activeIndex"的值保存在localStorage中来实现刷新后导航栏高亮的问题,点击刷新是ok了,结果却有一个更大的坑,从地址栏改变页面,发现高亮的还是之前的导航,嗯。。。想哭ing,最后想着应该从地址跳转来匹配设置高亮,最后查了网上的一些文章,实现之后,记录下这个笔记。
参考资料https://blog.csdn.net/m0_38134431/article/details/94755527
实现核心
通过路由router设置路由元信息(meta)记录地址,在MenuNav中读取meta中设置的信息,匹配el-menu-item中index的值,来解决刷新或地址改变造成的一些导航栏高亮问题
实现步骤
在router下index.js meta中设置一个activeMenu来记录地址(数字也行,最好是地址,比较清楚)。
{
path: 'params',
name: 'Params',
component: Params,
meta:{
isLogin:true,
activeMenu:'params'
}
},
在NamMenu.vue中设置el-menu-item中的index=“params”(index的值与路由meta中activeMenu一致)
<el-menu-item index="params">
<router-link class="router-text" to="/params">
<i class="el-icon-copy-document"></i>
<span class="top-text">规格参数</span>
</router-link>
</el-menu-item>
在computed中获取meta中activeMenu的值,并与el-menu-item中index值匹配,从而实现根据地址高亮
// 我们使用计算属性来获取到当前点击的菜单的路由路径,然后设置default-active中的值
// 使得菜单在载入时就能对应高亮
activeMenu() {//el-menu中:default-active="activeMenu"
const route = this.$route
console.log(route);
const { meta, path } = route
// if set path, the sidebar will highlight the path you set
// 可以在路由配置文件中设置自定义的路由路径到meta.activeMenu属性中,来控制菜单自定义高亮显示
if (meta.activeMenu) {
return meta.activeMenu
}
return path
}