vue3 动态路由 多级菜单

对于Vue3动态路由多级菜单，可以通过在路由配置中使用嵌套路由来实现。具体步骤如下：

1. 在路由配置中定义父级路由，例如：

const routes = [
  {
    path: '/menu',
    name: 'Menu',
    component: Menu,
    children: [
      {
        path: 'level1',
        name: 'Level1',
        component: Level1,
        children: [
          {
            path: 'level2',
            name: 'Level2',
            component: Level2
          }
        ]
      }
    ]
  }
]

2. 在父级组件中使用`<router-view>`标签来渲染子路由，例如：

<template>
  <div>
    <h1>Menu</h1>
    <router-view></router-view>
  </div>
</template>

3. 在子组件中使用`$route.params`来获取动态路由参数，例如：

<template>
 <div>
    <h2>Level1</h2>
    <p>Param: {{ $route.params.param }}</p>
    <router-view></router-view>
  </div>
</template>