木灵鱼儿

木灵鱼儿

阅读：3013

最后更新：2020/12/24/ 23:48:06

关于element 侧边栏导航高亮的思路

不久之前，我写了一篇《element ui 侧边栏导航刷新自动展开并高亮》的文章，里面主要讲了怎么对侧边栏导航进行高亮，刷新并依旧保持高亮展开的方法。

但是后来我发现我之前的那种思路有些窄了。不太适合更大型的站点开发使用。

之前的方法主要讲的是：

每个网页对应一个导航栏菜单，此时导航栏菜单和网页是一一对应的，所以我可以使用当前路由的name值来进行高亮。

但是，如果有更复杂的情况呢？

比如：

  1. 我的导航菜单只显示两级，剩下的级数不显示，点击三级及以上时怎么办？
  2. 虽然两个页面在路由配置里是同级路由，但是a路由点击按钮跳转到b路由，b路由有前缀条件，所以不能直接出现在导航菜单里，那么应该已经保持a路由菜单高亮才行，不然非常突兀，怎么处理？

带着上面两个问题，我思考了很久。

解决之道

我们最终要做到的无非就这一点：如何让二级菜单按钮在进入非本页时依旧高亮？

我们可以增加一个meta属性值，通过判断这个meta属性值是否与导航菜单的index值相同，如果相同，导航菜单不就高亮了。

先决条件

  1. 导航菜单的index值为路由的name值

配置一个路由：

const router = [
  {
    path:"test",name:"Test",component:{render:h=>h("router-view")},
    meta:{title:"二级路由"},
    redirect:{name:"TestA"},
    children:[
      {
        path:"a",name:"TestA",component:()=>import("./view/testa"),
        meta:{title:"a路由"},
      },
      {
        path:"b",name:"TestB",component:()=>import("./view/testb"),
        meta:{title:"b路由",activeMenu:"TestA"},
      },
    ]
  
  }
]

导航遍历的数组

const sidebarArr = [
  {
    title:"二级路由",children:[
      {title:"a路由",name:"TestA"}
    ]
  }
]

遍历这个数组我们可以得到如下的菜单结构：

  • 二级路由

    • a路由

element 高亮的属性

<template>
  <el-menu :router="true" :default-active="activeName">
    ...这里就不重复写了，反正菜单按钮的index值对应name
  </el-menu>
</template>
<script>
export default {
  computed:{
    activeName(){
      const name = this.$route.name;
      return name || "";
    }
  }
}
</script>

这里还是使用的当前路由的name属性，此时如果我们进入到testb路由，a路由的高亮效果肯定是没有了。所以我们需要这样操作：

<template>
  <el-menu :router="true" :default-active="activeName">
    ...这里就不重复写了，反正菜单按钮的index值对应name
  </el-menu>
</template>
<script>
export default {
  computed:{
    activeName(){
      const route = this.$route;
      let name = route.name;
      if(route.meta && route.meta.activeMenu) {
        name = route.meta.activeMenu;
      }
      return name || "";
    }
  }
}
</script>

这样的话，即便我们进入到testb，但是我们判断到testb路由有meta属性，并且有一个设置的activeMenu属性，我们拿到这个属性返回即可。

activeMenu就是当进入到testb路由是，应该高亮的菜单index值，也就是对应的testa路由的name值。

另一种想法

当我们的路由层级越来越多的时候，给每个路由都设置一个activeMenu可能会书写很多个，那么我们可以将activeMenu放置在父级路由上，然后我们通过this.$route.matched属性进行遍历，记得倒序遍历。

那么可能有人会觉得，既然activeMenu就可以搞定了，为什么还要给父级路由设置name:"Test"，其实这个设置是给面包屑导航使用的，虽然侧边栏导航点击 二级路由 只是展开菜单，但是面包屑导航如果要点击，那是需要进行路由跳转的，所以我们需要设置一个name属性。

至于面包屑怎么弄，等我有机会再写篇文章记录一下。

文章分类 vue 项目实战
文章标签 vue路由element导航高亮activeMenudefault-active
木灵鱼儿

木灵鱼儿

发布了 716 篇文章获得点赞 0获得阅读 3013

版权申明

本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可，禁止转载。

one
two
three

关于作者

站点职位 博主
获得点赞 0
文章被阅读 3013

相关文章

利用发布订阅模式封装一个IntersectionObserver利用发布订阅模式封装一个IntersectionObserver
typecho 自定义分类和分类高亮处理typecho 自定义分类和分类高亮处理
ts封装一个localStorage和sessionStorage的类ts封装一个localStorage和sessionStorage的类
利用typescript实现原生css变量的主题切换功能类利用typescript实现原生css变量的主题切换功能类
typecho主题开发：基于webpack5的多页面打包项目typecho主题开发：基于webpack5的多页面打包项目

目录树