vue3动态路由菜单导航

Vue3 中的动态路由菜单导航通常是在单页应用 (SPA) 中实现的，目的是根据用户的访问权限或当前的路由状态动态地渲染菜单项。这需要用到 Vue Router 的 `dynamic` 功能以及组件的条件渲染。

1. 定义动态路由：在 Vue Router 配置文件中，使用冒号 `:` 和动态段命名（如 :userId 或 :slug）来创建动态路径，比如 `'/users/:userId'`。

const routes = [
  {
    path: '/users',
    component: UserList,
    children: [
      { path: ':userId', component: UserProfile }
    ]
  }
];

2. 父组件模板：在父路由组件中，使用 v-for 来遍历配置的动态路由，显示菜单链接，并传递动态参数给子组件。

<router-link :to="{ name: 'UserProfile', params: { userId: item.id }}" v-for="item in menuItems" :key="item.id">
  <span>{{ item.name }}</span>
</router-link>

这里的 `menuItems` 是来自数据或API的菜单项列表。

3. 子组件接收参数：子组件如 `UserProfile` 接收 `params` 对象并在内部处理。

<template>
  <div>User Profile for {{ $route.params.userId }}</div>
</template>

<script>
export default {
  props: ['userId']
};
</script>