• 我转过几个弯 绕过那个小雨楼
  • 拿着蒲扇摆着衣衫渡着紧箍咒
  • 不问天涯不停留 喝过几壶酒
  • 不过年少白头道义放胸口
  • 倘若明天之后 遥看前尘剑封侯
  • 似那天上神仙无所求
  • 朝朝暮暮君如梦醒十分不为何理由
  • 是真是假是惶恐是无休
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 又过了几个弯 算尽天量道莫慌
  • 踏这田园闻这芳草香
  • 跌跌撞撞仗剑天涯折煞不枉无笔良
  • 是梦是幻是温柔是家乡
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 谁能与我一醉方休

关于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属性。

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

0

相关文章

微信收款码
微信收款码