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

Element UI 的 `el-menu` 组件本身提供了一个简单的导航结构，但默认情况下，当点击 `el-submenu`，它会展开子菜单而不是直接跳转到另一个页面。如果你想要实现点击 `el-submenu` 后跳转页面，你需要自定义一些逻辑。

首先，在 `el-submenu` 的 `index` 或者 `router` 属性上绑定路由信息，假设你正在使用的路由管理库是 Vue Router。你可以这样做：

<template>
  <el-menu :default-active="currentIndex">
    <el-submenu v-for="(item, index) in menuItems" :key="index" :index="item.path || item.index">
      <template slot="title">{{ item.name }}</template>
      <el-menu-item v-for="subItem in item.subItems" :index="subItem.path || subItem.index" @click="goToPage(subItem)">
        {{ subItem.name }}
      </el-menu-item>
    </el-submenu>
  </el-menu>
</template>

<script>
export default {
  data() {
    return {
      currentIndex: '',
      menuItems: [
        // ... 你的菜单项数据
      ],
    };
  },
  methods: {
    goToPage(subItem) {
      this.$router.push(subItem.to); // 如果 subItem 中有 to 属性指向路由，例如 { path: '/target' }
    },
  },
};
</script>

在这个例子中，`goToPage` 方法会在点击子菜单项时被触发，通过 `$router.push` 方法将用户导向相应的页面路径。记得在你的路由配置中也要处理这些目标路径。