这个问题可能是由于您的路由配置导致的。请确保您的路由配置正确,以便在进入详情页时,父级菜单也可以正确高亮。

另外,您也可以尝试使用路由的meta属性来设置菜单的高亮状态。在路由配置中,为每个菜单项添加一个meta属性,然后在菜单组件中使用$route.meta来判断当前激活的菜单项。

例如,您的路由配置可以如下所示:

const routes = [
  {
    path: '/',
    component: Home,
    meta: {
      title: '首页',
      icon: 'el-icon-s-home'
    },
    children: [
      {
        path: 'user',
        component: User,
        meta: {
          title: '用户管理',
          icon: 'el-icon-user'
        },
        children: [
          {
            path: 'detail',
            component: UserDetail,
            meta: {
              title: '用户详情'
            }
          }
        ]
      }
    ]
  }
]

然后,在菜单组件中,您可以使用以下代码来判断当前激活的菜单项:

<template>
  <el-menu :default-active="$route.meta.title">
    <el-menu-item v-for="item in menuItems" :key="item.title" :index="item.title">
      <i :class="item.icon"></i>
      <span slot="title">{{ item.title }}</span>
    </el-menu-item>
  </el-menu>
</template>

<script>
export default {
  computed: {
    menuItems() {
      return this.$router.options.routes.filter(route => route.meta && route.meta.title).map(route => ({
        title: route.meta.title,
        icon: route.meta.icon
      }))
    }
  }
}
</script>

这样,无论您进入哪个子路由,父级菜单都会正确高亮。

Vue el-menu 进入详情页父级菜单不高亮问题解决方案

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

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