vue-admin-template进入多级子路由时侧边栏父级路由仍然保持高亮

需求描述

用Vue-admin-template做后台时,难免遇到在某一父界面进入子界面查看详情或者进行其他操作的情况,或者父路由使用了重定向到其某子路由。默认情况下,这时候侧边栏对应的父路由会取消高亮,但是我们想要它保持高亮

问题分析

我们用来示例的路由表假定是这样配置

      {
        path: 'examine',
        component: () => import('@/views/nested/menu1/index'),
        redirect: '/nested/examine/examinePage',
        name: 'examineIndex',
        meta: {
          title: '报名审核',
          breadNum: 1,
        },
        children: [
          {
            path: 'examinePage',
            component: () => import('@/views/nested/menu1/examine'),
            name: 'examine',
            meta: {
              title: '报名审核',
              breadNum: 2,
            },
            hidden: true
          }
        ]
      },

很明显我们是重定向到其子路由的,但是侧边栏的item是渲染的父路由,这时候选中审核会出现我们想要的子路由界面,但是侧边栏不会高亮。

查看vue-admin-template源码的侧边栏组件可以发现高亮渲染原理。在路径@/components/layout/components/Sidebar/index.vue中,我们可以发现高亮的判定如下

      <el-menu
        :default-active="activeMenu"
        :collapse="isCollapse"
        :background-color="variables.menuBg"
        :text-color="variables.menuText"
        :unique-opened="false"
        :active-text-color="variables.menuActiveText"
        :collapse-transition="false"
        mode="vertical"
      >
      </el-menu>

观察到default-active默认激活Menu Attribute绑定的是activeMenu方法:

    activeMenu() {
      const route = this.$route
      const { meta, path } = route
      // if set path, the sidebar will highlight the path you set
      if (meta.activeMenu) {
        return meta.activeMenu
      }
      return path
    },

这里框架作者注释写到sidder会高亮你设置的路径,从代码可见判定方法是两种:路由的meta有配置activeMenu则按照activeMenu渲染,否则高亮当前选中路由的路径

那么回到router/index.js,在children中配置好我们想要高亮的父路由路径

        children: [
          {
            path: 'examinePage',
            component: () => import('@/views/nested/menu1/examine'),
            name: 'examine',
            meta: {
              title: '报名审核',
              breadNum: 2,
              activeMenu: '/nested/examine'
            },
            hidden: true
          }
        ]

在重定向到的子路由的meta添加activeMenu: '需要高亮的path',比如我们这里在侧边栏渲染出的是父路由对应的path是/nested/examine

问题解决,如果嵌套的子路由多那也在每一级都配置好activeMenu就好

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

六时二一

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值