vue3 动态路由实现二级菜单

在Vue 3中，动态路由实现二级菜单可以通过使用嵌套路由来实现。具体步骤如下：

1. 在定义路由时，定义嵌套路由的路径和组件：

const routes = [
  {
    path: '/',
    component: Home
  },
  {
    path: '/about',
    component: About,
    children: [
      {
        path: 'profile',
        component: Profile
      },
      {
        path: 'contact',
        component: Contact
      }
    ]
  }
]

2. 在父组件中使用`<router-view>`标签来渲染子组件：

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

3. 在子组件中使用`<router-link>`标签来定义二级菜单的链接：

<template>
  <div>
    <h2>Profile</h2>
  </div>
</template>

<script>
export default {
  name: 'Profile',
}
</script>

<template>
  <div>
    <h2>Contact</h2>
  </div>
</template>

<script>
export default {
  name: 'Contact',
}
</script>

以上就是使用Vue 3实现动态路由实现二级菜单的步骤，希望能够帮助到你。