Vue Router el-menu 子路由详情页父级菜单高亮显示教程

如果您想要在Vue Router中使用el-menu组件，并且想要实现子路由详情页时父级菜单高亮显示，可以按照以下步骤：

在Vue Router中配置路由和子路由，例如：

const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: Home,
      children: [
        {
          path: 'detail',
          component: Detail
        }
      ]
    }
  ]
})

在el-menu组件中使用router-link标签来实现菜单项的跳转，例如：

<el-menu :default-active="$route.path">
  <el-menu-item index="/">
    <router-link to="/">首页</router-link>
  </el-menu-item>
  <el-submenu index="detail">
    <template slot="title">详情页</template>
    <el-menu-item index="/detail">
      <router-link to="/detail">详情</router-link>
    </el-menu-item>
  </el-submenu>
</el-menu>

在这个例子中，使用了router-link来实现菜单项的跳转，并使用了$router.path来设置默认选中项的值。同时，使用el-submenu来实现子菜单的显示和隐藏，并使用了template slot来自定义子菜单的标题。

在el-menu组件中使用router-link-active来实现菜单项的高亮显示，例如：

<el-menu :default-active="$route.path" router>
  <el-menu-item index="/">
    <router-link to="/" exact>首页</router-link>
  </el-menu-item>
  <el-submenu index="detail">
    <template slot="title">详情页</template>
    <el-menu-item index="/detail">
      <router-link to="/detail">详情</router-link>
    </el-menu-item>
  </el-submenu>
</el-menu>

在这个例子中，使用了router-link-active来实现菜单项的高亮显示。同时，使用了exact属性来确保只有在路由完全匹配时才会高亮显示菜单项。

通过以上步骤，就可以实现在Vue Router中使用el-menu组件，并实现子路由详情页时父级菜单高亮显示的效果。