Vue el-menu 详情页父级菜单高亮设置 - 监听路由变化

在 Vue el-menu 中，当进入详情页时，父级菜单不会自动高亮，需要手动设置当前菜单的高亮状态。

可以通过 'default-active' 属性设置默认选中的菜单，也可以监听路由变化，在路由变化时动态设置菜单的高亮状态。

下面是一个示例代码，展示如何通过监听路由变化来动态设置菜单的高亮状态：

<template>
  <el-menu :default-active="$route.path" mode="horizontal">
    <el-menu-item index="/home">首页</el-menu-item>
    <el-submenu index="/products">
      <template slot="title">产品</template>
      <el-menu-item index="/products/1">产品1</el-menu-item>
      <el-menu-item index="/products/2">产品2</el-menu-item>
    </el-submenu>
  </el-menu>
</template>

<script>
export default {
  watch: {
    $route(to) {
      this.$nextTick(() => {
        this.$refs.menu && this.$refs.menu.setCurrentPath(to.path)
      })
    },
  },
}
</script>

在上面的代码中，我们使用 'watch' 监听 '$route' 的变化，在路由变化时通过 'setCurrentPath' 方法动态设置当前菜单的高亮状态。同时，我们还需要在 'el-menu' 上设置 'ref' 属性，以便在代码中引用该组件。