解决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”少了后面的“/”路由也能调转,但是菜单就是不会高亮显示