vue3.0动态路由

在

3 中，可以使用

来

菜单。以下是一个示例：

首先，在

配置中定义

。可以使用一个数组来存储菜单项的信息，然后通过遍历数组生成对应的

配置。

 javascript // 路由 配置文件 import { create Router , createWebHistory } from ' vue - router '  const routes = [ { path: '/', name: 'Home', component: () => import('@/views/Home. vue ') }, { path: '/about', name: 'About', component: () => import('@/views/About. vue ') }, // 动态路由 { path: '/menu/:id', name: 'Menu', component: () => import('@/views/Menu. vue ') } ]  const router = create Router ({ history: createWebHistory(), routes })  export default router 

然后，在菜单组件中使用

。可以使用 `

-link` 组件来生成

链接，通过传递不同的 `to` 属性来

不同的

。

 vue <template> <div> <ul> <li v-for="item in menuItems" :key="item.id"> < router -link :to="`/menu/${item.id}`">{{ item.name }}</ router -link> </li> </ul> </div> </template>  <script> export default { data() { return { menuItems: [ { id: 1, name: 'Menu 1' }, { id: 2, name: 'Menu 2' }, { id: 3, name: 'Menu 3' } ] } } } </script> 

最后，在 Menu 组件中可以通过 `$route.params` 来获取

参数，并根据参数的不同展示不同的内容。

 vue <template> <div> <h2>Menu {{ $route.params.id }}</h2> <!-- 其他内容 --> </div> </template> 

这样就可以

基于

的

菜单了。当点击菜单项时，会根据

参数加载对应的组件。希望这个示例能对你有所帮助！

版权声明：

本文来源网络，所有图片文章版权属于原作者，如有侵权，联系删除。

本文网址：https://www.mushiming.com/mjsbk/9316.html