el-menu中的defaule-active记录菜单id,定位到菜单处实现当前活动菜单高亮;
如果不设置,页面刷新时不保留高亮;如果有跳转到子级路由,并要使父级路由高亮的情况,就在路由配置meta里面记录父级路由地址,从而在路由跳转时获取meta里面保存的父级路由信息,使父级路由高亮
具体代码:
菜单栏:
<el-menu :default-active="activeMenu" ...>
computed:{
activeMenu(){
return this.$route.meta.parent || this.$route.path //如果meta有parent,就取parent的值,
}
}
路由配置
{
path:‘product’,
component:()=> import('@/views/common/product'),
name:'product',
meta:{title:'产品',cache:true} //父级
}
{
path:‘product’,
component:()=> import('@/view/common/product/productDetail'),
name:'product',
meta:{title:'产品详情',cache:true,parent:'/common/product'}
}