解决路由跳转Element ui导航控件没有同步高亮的问题

背景：在导航A页面点击按钮路由跳转到导航B对应的页面，页面跳转但是导航菜单的高亮效果并没有同步展示，如图：

image.png

从图一"项目管理"跳转到图二"测试管理"后，路由地址发生了变化页面跳转但是左侧导航的高亮效果并没有实时同步。

解决方案：

将menu菜单的default-active属性值和menu-item的index属性值映射到路由地址

1、绑定路由路径
:default-active="$route.path"
2、:index="路由路径"

具体代码：

<el-menu
            :default-openeds="openeds"
            :default-active="$route.path"
            :collapse="isCollapse"
            class="el-menu-vertical wb-menu"
            @select="handleSelect"
        >
            <template v-for="item in menuData">
            
            <el-menu-item :name="item.text" :index="item.url" :key="item.id" :route="item.url">
                <i :class="item.icon" class="max-font iconfont"></i>
                <span slot="title">{{ item.text }}</span>
            </el-menu-item>
        </template>

以上两个地方的改动基本解决了问题，但是如果涉及到子路由则匹配失败高亮消失，
例如："测试管理"菜单对应的页面下需要查看测试报告，则路由地址变为：
/testManager/taskDetail/3236/274
对应修改为以下即可:

default-active="'/'+$route.path.split('/')[1]"

 '/'+$route.path.split('/')[1]的计算结果即为：/testManager

最后,无论地址栏的路由怎么处理，只要保证初始化路由的url和defaule-active的值对应上即可，如下图初始url的地址带有operater字符但是处理后显示到地址栏里面有operater,通过this.$route.path获取到的也没有operater，只需要做个拼接就好了:

default-active="activeIndex"

watch: {
        //监听路由
        '$route.path': function (newVal, oldVal) {
            if(newVal !== oldVal){
                if(this.$route.path.indexOf('system') !== -1){
                    this.activeIndex = '/operator/#' + this.$route.path
                }else{
                    this.activeIndex = '/'+this.$route.path.split('/')[1]
                }
            }
        },
    },
    created() {
        //系统设置路由特殊处理
        if(this.$route.path.indexOf('system') !== -1){
            this.activeIndex = '/operator/#' + this.$route.path
        }else{
            this.activeIndex = '/'+this.$route.path.split('/')[1]
        }
    },

8W2VUN$GG0~_93%(I{8D4}H.png

最后编辑于：2019.12.27 21:36:29