element-ui 的 el-menu 菜单实现点击 el-submenu 也可以跳转页面

在 Element UI 中，el-menu 组件的 el-submenu 子组件通常用于定义子菜单项，它们不会直接导航到其他页面。如果你想实现点击 el-submenu 也能进行页面跳转的效果，你可以在 el-menu-item 中使用 <router-link> 或 vue-router 的编程式导航。

以下是一个简单的示例，展示如何在点击 el-submenu 时使用 vue-router 进行页面跳转：

<template>
  <el-menu router>
    <el-submenu index="1">
      <template slot="title">导航一</template>
      <el-menu-item index="1-1">选项1</el-menu-item>
      <el-menu-item index="1-2">选项2</el-menu-item>
    </el-submenu>
    <!-- 其他菜单项 -->
  </el-menu>
</template>
 
<script>
export default {
  // 确保你已经在 Vue 项目中配置了 vue-router
  // 在路由配置中，确保对应的路径已经定义了相应的页面组件
  // 例如：
  // routes: [
  //   {
  //     path: '/1-1',
  //     component: YourComponent1,
  //   },
  //   {
  //     path: '/1-2',
  //     component: YourComponent2,
  //   },
  //   // 其他路由配置
  // ]
};
</script>

在这个例子中，el-menu 的 router 属性使得菜单和 vue-router 进行了集成。el-menu-item 的 index 属性对应 vue-router 的路径。当用户点击 el-menu-item 时，vue-router 会根据指定的路径进行页面跳转。

确保你的 Vue 项目已经配置了 vue-router，并且在 router 的路由配置中定义了与 index 对应的页面组件。