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就好