解決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”少了后面的“/”路由也能調轉，但是菜單就是不會高亮顯示