如果你使用的是 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>
vue el-menu 路由进入详情页 父级高亮丢失

原文地址: https://www.cveoy.top/t/topic/bgot 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录