Vue el-menu 路由跳转详情页 父级菜单高亮丢失解决方法
在 vue el-menu 中,当路由进入详情页时,父级高亮丢失的原因可能是由于路由路径中没有包含父级菜单的路径,或者是路由配置中没有设置 meta 属性。您可以尝试以下解决方法:
- 修改路由路径:在路由路径中包含父级菜单的路径,例如:
{
path: '/parent',
component: Parent,
children: [
{
path: 'child',
component: Child
}
]
}
- 在路由配置中设置
meta属性:在路由配置中设置meta属性来标记当前路由属于哪个菜单,例如:
{
path: '/child',
component: Child,
meta: { menu: 'parent' }
}
然后在菜单组件中使用 :default-active 属性来设置默认高亮的菜单项,例如:
<el-menu :default-active="$route.meta.menu">
<el-menu-item index="parent">
Parent
</el-menu-item>
<el-menu-item index="child">
Child
</el-menu-item>
</el-menu>
这样就可以在进入详情页时保持父级菜单的高亮状态了。
原文地址: https://www.cveoy.top/t/topic/mHVa 著作权归作者所有。请勿转载和采集!