解决elementUI中导航菜单（el-menu）页面刷新后的菜单选中问题

解决elementUI中导航菜单（el-menu）页面刷新后的菜单选中问题

情况一：单个菜单页面刷新导航失去高亮；（如下图这种菜单类型）

问题是elementUI的el-menu组件提供了一个默认高亮的属性default-active,当页面刷新后default-active的值就会成为默认给的值，解决这个只用取出当前页的路由然后赋值给activeIndex即可，代码如下：

<el-menu :default-active="activeIndex"
         mode="horizontal"
         :router="true"
         background-color="#091639"
         text-color="#fff"
         active-text-color="#FEC002"
         @select="handleSelect">
    <el-menu-item index="/device_new/">设备管理</el-menu-item>
    <el-menu-item index="/monitor/">状态监测</el-menu-item>
    <el-menu-item index="/fault_new/">故障诊断</el-menu-item>
    <el-menu-item index="/trend_new/">趋势分析</el-menu-item>
    <el-menu-item index="/spectrogram/">谱图分析</el-menu-item>
</el-menu>

data(){
            return {
                activeIndex: '/device_new/',
                title: '设备管理'
            }
        },
        mounted() {
            this.activeIndex = this.$route.path
        },

情况二：嵌套路由，当选中子路由时父级菜单要高亮显示，单前选中菜单也是被选中的颜色；（如下图）

当选中版本管理时，版本管理的被选中，同时父级菜单“系统配置”也将高亮显示；

<el-menu
                    :default-active="navLeftActive"
                    class="el-menu-demo"
                    mode="horizontal"
                    :router="true"
                    text-color="#fff"
                    active-text-color="#ffd04b"
                    background-color="#283045"
                >
                    <div class="group-item group-item-left">
                        <el-submenu index="/sys/" v-if="permissionList['system']" class="is-show-name">
                            <template slot="title">
                                <img
                                    src="@/assets/images/head/xtpz_v.png"
                                    alt
                                    v-if="pathUrl == '/sys/'"
                                />
                                <img src="@/assets/images/head/xtpz_n.png" alt v-else />
                                <span class="menu-name">{{$t('lang.MSconfig')}}</span>
                            </template>
                            <el-menu-item
                                index="/sys/"
                                v-if="permissionList['user']"
                            >{{$t('lang.users-manage')}}</el-menu-item>
                            <el-menu-item
                                index="/area/"
                                v-if="permissionList['area']"
                            >{{$t('lang.area-manage')}}</el-menu-item>
                            <el-menu-item
                                index="/message/"
                                v-if="permissionList['message']"
                            >{{$t('lang.message-center')}}</el-menu-item>
                            <el-menu-item
                                index="/log/system"
                                v-if="permissionList['log']"
                            >{{$t('lang.syslog')}}</el-menu-item>
                            <el-menu-item
                                index="/version/android"
                                v-if="permissionList['version']"
                            >{{$t('lang.version-manage')}}</el-menu-item>
                            <el-menu-item
                                    index="/ota/"
                                    v-if="permissionList['ota']"
                            >{{$t('lang.ota')}}</el-menu-item>
                            <el-menu-item
                                    index="/decrypt/"
                                    v-if="permissionList['decrypt']"
                            >{{$t('lang.decrypt-record')}}</el-menu-item>      
                        </el-submenu>
                    </div>
                </el-menu>
<script>
	computed: {
        navLeftActive: function() {
            console.log(this.$route)
            const {meta, path} = this.$route
            if(meta.activeMenu){
                return meta.activeMenu
            }
            return path
        },
        pathUrl: function() {
            if (this.currentRoute.name) {
                return "/" + this.$route.name.split("_")[0] + "/";
            }
        },
    }

</script>

const UserRouter = [
    {
        path: '/sys',
        component: () => import('@/views/admin/system/user/List.vue'),
        children: [
            {
                path: '/',
                component: () => import('@/views/admin/system/user/List.vue'),
                name:'sys_user',
                meta: {
                    activeMenu: '/sys/'
                }
            },
            {
                path: 'role',
                component: () => import('@/views/admin/system/user/Role.vue'),
                name:'sys_role',
                meta: {
                    activeMenu: '/sys/'
                }
            },
            {
                path: 'detail',
                component: () => import('@/views/admin/system/user/Detail'),
                name:'sys_userDetail',
                meta: {
                    activeMenu: '/sys/'
                }
            }
        ]
    }


export default UserRouter;

上面分别为路由组件和“系统配置”下“用户管理"的路由，解决方案为在路由文件的每个子路由都添加与父级（系统配置）相对应的路由信息activeMenu，再通过default-active的值来绑定activeMenu的值即可高亮显示父级菜单了。

tips:开发中遇到的坑，el-menu中的index的值例如index=‘/sys/’一定得和路由文件的path值相对应如果path写成“/sys”少了后面的“/”路由也能调转，但是菜单就是不会高亮显示