Vue+iView跳转子菜单父级菜单保持高亮

vue项目中，经常会使用到iView框架，而iView的左侧菜单相关功能，
在开发过程中，多多少少会有点问题。

本文简单总结一下：iView跳转子菜单，或者说是详情，编辑等隐藏掉的页面。

跳转页面之后，如何使父级菜单，或者当前选中菜单保持高亮选中。

一.修改原有的着色逻辑

1，routers.js中

跳转页中meta中加入

recoverName: ‘user-info’ // 和跳转前页面的name保持一致。

 {
    path: 'user-info',
    name: 'user-info',
    meta: {
      icon: '_jinruquanping',
      size: 19,
      title: '用户信息'
    },
    component: () =>
                    import('@/view/channel-route/user.vue')
  },
  {
    path: 'user-edit',
    name: 'user-edit',
    meta: {
      icon: '_jinruquanping',
      size: 19,
      hideInMenu: true,
      hideInTagList: true,
      title: '用户信息编辑',
      recoverName: 'user-info' 
    },
    component: () =>
                    import('@/view/channel-route/user-edit.vue')
  },

2，在components下的main.vue中

a.修改菜单的激活样式方法

原有的方法：

  :active-name="$route.name" 

    <Sider
      hide-trigger
      collapsible
      :width="200"
      :collapsed-width="64"
      v-model="collapsed"
      class="left-sider"
      :style="{overflow: 'hidden'}"
    >
      <side-menu
        accordion
        ref="sideMenu"
       :active-name="$route.name" 
        :collapsed="collapsed"
        @on-select="turnToPage"
        :menu-list="menuList"
      >
        <div class="logo-con">
          <img v-show="!collapsed" :src="maxLogo" key="max-logo" />
          <img v-show="collapsed" :src="minLogo" key="min-logo" style="height: 44px"/>
        </div>
      </side-menu>
    </Sider>

修改后的方法：

 :active-name="recoverName"

b.在监听方法中

  watch: {
    //跳转子菜单保持父菜单高亮处理;
    activeName() {
          if (this.$route.meta.activeName){
               return this.$route.meta.activeName; 
          }else{
               return this.$route.name; 
          }
     },
 },     

这样就可以让菜单跳转保持高亮。

二.在原有基础上直接修改name。

1.routers.js中

跳转页的 name: ‘user-edit’, 直接修改为name: 'user-info’即可

 {
    path: 'user-info',
    name: 'user-info',
    meta: {
      icon: '_jinruquanping',
      size: 19,
      title: '用户信息'
    },
    component: () =>
                    import('@/view/channel-route/user.vue')
  },
  {
    path: 'user-edit',
  // name: 'user-edit',   name: 'user-info',
    meta: {
      icon: '_jinruquanping',
      size: 19,
      hideInMenu: true,
      hideInTagList: true,
      title: '用户信息编辑',
    },
    component: () =>
                    import('@/view/channel-route/user-edit.vue')
  },

2.在components下的main.vue中

菜单激活方式不变

active-name=“$route.name”

这样也可以让菜单跳转详情页后保持高亮。