2021-06-10

踩坑

最开始想的是通过将当前: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
 }