iveiw-admin子级路由跳转实现父级保持高亮选中

管理端很多时候需要做三级路由跳转，这些路由的父级是在左边菜单展示，而子级路由则没有在左侧菜单展示，在跳转到子级路由时，父级仍需保持高亮选中效果，废话不多刷，上代码。

提示：首先理解菜单是如何高亮选中的，iview的Menu组件是根据name值来高亮选中，所以我们只要动态修改name就可以了

1、首先我们修改路由
这里我以部分用户组管理路由为例

{
    path: '/account_management',
    name: 'account_management',
    meta: {
      title: '账号管理',
      icon: 'md-person'
    },
    component: Main,
    children: [
      {
        path: 'power_list', // 这里我们是父级路由，
        name: 'power_list',
        meta: {
          title: '用户组管理',
          icon: 'ios-color-filter'
        },
        component: () => import('@/view/account_management/power_list.vue')
      },
      {
        path: 'power_list/power_detail', // 不需要用三级路由，用路由补全的方式实现伪三级路由
        name: 'power_detail',
        meta: {
          title: '用户组详情',
          icon: 'ios-color-filter',
          hideInMenu: true,
          activeName: 'power_list' // 重点 当跳转到子级时，这是想让父级菜单选中的name值
        },
        component: () => import('@/view/account_management/power_detail.vue')
      }
    ]
  }

2、修改components下main.vue，找到side-menu代码，并在computed添加代码

<side-menu
        accordion
        ref="sideMenu"
        :active-name="activeName" // 这里本来是$route.name 就是当前路由的name值，我们需要动态设置，所以改为computed计算属性
        :collapsed="collapsed"
        @on-select="turnToPage"
        :menu-list="menuList"
      >
</side-menu>

/*********************************************/

 computed: { // 在computed里添加以下代码
	activeName() {
      if (this.$route.meta.activeName) return this.$route.meta.activeName; // 如果路由存在activeName就将activeName设置为路由里的activeName值
      else return this.$route.name; // 否则使用路由自身的name值
    }
}

3、效果展示