Vue el-menu 导航菜单路由切换后父级高亮丢失解决方案

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

问题描述：

使用 Vue 的 el-menu 组件作为导航菜单，点击菜单项路由进入详情页后，菜单的父级菜单高亮丢失。

原因分析：

这是因为路由切换后，菜单的选中状态没有及时更新。

解决办法：

可以通过监听路由的变化，手动更新菜单的选中状态。

1. 在 el-menu 组件上添加 :default-active 属性，设置默认选中的菜单项。

<el-menu :default-active='${$route.path}'>
  <!-- 菜单项 -->
</el-menu>

2. 在 Vue 实例中，监听路由变化，更新菜单的选中状态。

// 在 Vue 实例中添加以下代码
watch: {
  '$route'(to) {
    // 更新菜单的选中状态
    this.$nextTick(() => {
      const activePath = to.path
      this.$refs.menu.setActiveItem(activePath)
    })
  },
},

这样就可以在路由切换后，自动更新菜单的选中状态，解决父级菜单高亮丢失的问题。