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'}
}
该博客介绍了在Vue.js中如何使用`el-menu`组件实现菜单项的高亮显示。通过设置`default-active`属性为`activeMenu`计算属性,根据当前路由的`meta`信息来决定哪个菜单应该被激活。当路由跳转到子级时,若要保持父级菜单高亮,可以在路由配置的`meta`字段中记录父级路由路径。代码示例展示了如何在`computed`属性中处理这种情况,确保页面刷新或子级路由跳转时仍能正确高亮父级菜单。

6063

被折叠的 条评论
为什么被折叠?



