Vue El-Menu 路由进入详情页父级高亮丢失解决方案

在使用 Vue El-Menu 路由进入详情页时，父级高亮丢失是一个常见问题。这通常是因为路由配置中没有正确设置菜单的 active 路由。

解决方法

在路由配置中，为每个菜单设置对应的 active 路由，例如：

{
  path: '/dashboard',
  component: Dashboard,
  meta: { menu: 'dashboard', active: '/dashboard' },
  children: [
    {
      path: 'info',
      component: DashboardInfo,
      meta: { menu: 'dashboard', active: '/dashboard' },
    },
    {
      path: 'setting',
      component: DashboardSetting,
      meta: { menu: 'dashboard', active: '/dashboard' },
    },
  ],
}

在 el-menu 组件中，使用 router 的 $route.path 属性来获取当前路由路径，并将其与菜单的 active 路由进行比较，如果相同则设置菜单的高亮状态，例如：

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

在 el-menu-item 组件中，使用 route 属性来保存菜单对应的路由信息，并在点击菜单时，使用 router 的 push 方法来跳转页面，例如：

<el-menu-item :index="item.path" v-for="item in menuList" :key="item.path" :route="{ path: item.path }" @click="handleMenuClick(item)">
  <i :class="'el-icon-' + item.icon"></i>
  <span slot="title">{{ item.title }}</span>
</el-menu-item>

// ...

methods: {
  handleMenuClick(item) {
    this.$router.push(item.path)
  },
},

通过以上三个步骤，就可以解决 Vue El-Menu 路由进入详情页父级高亮丢失的问题。