vue el-menu 路由进入详情页 父级高亮丢失
如果你使用的是 Vue Router,可以在路由配置中设置 meta 属性来标记当前路由是否是激活状态。然后在 el-menu 组件中根据路由的 meta 属性来设置菜单项的高亮状态。
例如,假设你有一个路由配置如下:
const routes = [
{
path: '/',
name: 'Home',
component: Home,
meta: { activeMenu: 'home' } // 标记为激活状态
},
{
path: '/about',
name: 'About',
component: About,
meta: { activeMenu: 'about' } // 标记为激活状态
},
{
path: '/detail',
name: 'Detail',
component: Detail
}
]
然后在 el-menu 组件中,可以使用 $route.meta.activeMenu 来判断当前路由是否是激活状态,进而设置菜单项的高亮状态。
<template>
<el-menu :default-active="$route.meta.activeMenu">
<el-menu-item index="home">首页</el-menu-item>
<el-menu-item index="about">关于我们</el-menu-item>
</el-menu>
</template>
原文地址: https://www.cveoy.top/t/topic/bgot 著作权归作者所有。请勿转载和采集!