elment-plus 如何菜单中实现子路由

Element Plus 是一个基于 Vue 3 的组件库，它提供了丰富的组件来帮助开发者快速构建用户界面。在 Element Plus 中实现含有子路由的菜单通常涉及以下步骤：

1. 定义路由：首先需要在 Vue 应用的路由配置文件中定义所有的路由规则。对于含有子路由的菜单项，你需要在路由配置中创建一个嵌套路由的结构。

2. 创建菜单组件：在菜单组件中，你可以使用 Element Plus 提供的 `<el-menu>` 组件来展示菜单项。对于有子路由的菜单项，可以使用 `<el-submenu>` 组件来包裹 `<el-menu-item>` 组件，以此来构建层级菜单。

3. 绑定路由：为每个菜单项绑定相应的路由路径。对于子菜单，它的路由路径应该与其父级路由相关联，确保路由的嵌套关系正确。

以下是一个简化的例子来说明如何实现：

import { defineAsyncComponent } from 'vue';
import { ElMenu, ElMenuItem, ElSubmenu } from 'element-plus';

// 路由配置
const routes = [
  {
    path: '/',
    component: defineAsyncComponent(() => import('../components/Home.vue')),
    name: 'Home'
  },
  {
    path: '/menu',
    component: defineAsyncComponent(() => import('../components/Menu.vue')),
    name: 'Menu',
    children: [
      {
        path: 'child1',
        component: defineAsyncComponent(() => import('../components/Child1.vue')),
        name: 'Child1'
      },
      {
        path: 'child2',
        component: defineAsyncComponent(() => import('../components/Child2.vue')),
        name: 'Child2'
      },
    ]
  }
];

// 菜单组件示例
<template>
  <el-menu :default-active="activeMenu">
    <el-submenu index="1">
      <template #title>
        <i class="el-icon-location"></i>
        <span>主菜单</span>
      </template>
      <el-menu-item index="/menu/child1">子菜单1</el-menu-item>
      <el-menu-item index="/menu/child2">子菜单2</el-menu-item>
    </el-submenu>
  </el-menu>
</template>

<script>
export default {
  data() {
    return {
      activeMenu: '/menu/child1' // 默认激活的菜单项
    };
  }
}
</script>

在这个例子中，我们定义了两个嵌套路由：`/menu/child1` 和 `/menu/child2`，并且在 `<el-submenu>` 中创建了子菜单项。