Vue 3 动态路由创建指南：完整示例及代码解析

当然可以！以下是一个示例，展示了如何使用Vue 3创建动态路由：\n\n首先，你需要安装Vue Router 4.x版本：\n\nshell\nnpm install vue-router@next\n\n\n然后，在你的主文件（通常是main.js）中，导入Vue Router并创建一个router实例：\n\njavascript\nimport { createApp } from 'vue'\nimport { createRouter, createWebHistory } from 'vue-router'\nimport App from './App.vue'\n\nconst router = createRouter({\n history: createWebHistory(),\n routes: [\n {\n path: '/',\n name: 'Home',\n component: () => import('./views/Home.vue')\n },\n {\n path: '/about',\n name: 'About',\n component: () => import('./views/About.vue')\n },\n {\n path: '/user/:id',\n name: 'User',\n component: () => import('./views/User.vue')\n }\n ]\n})\n\nconst app = createApp(App)\n\napp.use(router)\n\napp.mount('#app')\n\n\n在上面的代码中，我们使用createRouter函数创建了一个router实例，并通过routes选项定义了路由的配置。每个路由对象都包括一个path用于匹配URL路径，一个name用于标识路由，以及一个component用于渲染对应的视图组件。\n\n在上面的示例中，我们定义了三个路由：'/'对应Home组件，'/about'对应About组件，'/user/:id'对应User组件。注意到/user/:id这个路由路径中的:id部分是动态的，表示用户的ID。\n\n接下来，在你的组件中可以使用router-link组件来生成链接，以及router-view组件来渲染对应的视图。例如，在App.vue中：\n\nhtml\n<template>\n <div>\n <router-link to="/">Home</router-link>\n <router-link to="/about">About</router-link>\n <router-link :to="{ name: 'User', params: { id: 1 }}">User 1</router-link>\n <router-link :to="{ name: 'User', params: { id: 2 }}">User 2</router-link>\n\n <router-view></router-view>\n </div>\n</template>\n\n\n在上面的代码中，我们使用router-link组件生成了两个链接到Home和About页面的导航链接，以及两个链接到User页面的动态链接。注意到:to属性中使用了对象语法，其中name属性指定了路由名称，params属性指定了动态参数。\n\n最后，你需要在你的组件中使用$route对象来访问当前路由的信息。例如，在User.vue中：\n\nhtml\n<template>\n <div>\n <h1>User {{ $route.params.id }}</h1>\n <!-- 其他内容 -->\n </div>\n</template>\n\n\n在上面的代码中，我们使用了$route.params.id来获取动态路由参数的值，并显示在页面上。\n\n这样，你就创建了一个基于Vue 3的动态路由。当你访问'/user/1'时，会渲染User.vue组件，并显示用户ID为1的信息；当你访问'/user/2'时，会渲染同样的组件，但显示用户ID为2的信息。