1.安装 Vue Router：
如果尚未安装 Vue Router，可以通过 npm 或 yarn 进行安装。
npm install vue-router
yarn add vue-router
2.创建动态路由组件：
首先，创建一个或多个需要用作动态路由的组件。
3.配置路由：
在创建 Vue 应用的主文件（通常是 main.js）中配置 Vue Router。
import { createApp } from 'vue'; import App from './App.vue'; import { createRouter, createWebHistory } from 'vue-router'; const router = createRouter({ history: createWebHistory(), routes: [ { path: '/', component: App, }, { path: '/dynamic/:id', // 动态路由 name: 'DynamicRoute', component: () => import('./DynamicRoute.vue'), // 异步加载组件 props: true, // 将路由参数传递给组件 }, ], }); const app = createApp(App); app.use(router); app.mount('#app');
4.使用动态路由：
在模板中使用 <router-link> 导航到动态路由，或者在代码中使用 router.push 进行编程式导航。
<template> <div> <router-link :to="{ name: 'DynamicRoute', params: { id: 1 }}">Dynamic Route 1</router-link> <router-link :to="{ name: 'DynamicRoute', params: { id: 2 }}">Dynamic Route 2</router-link> </div> </template>
在javascript
// 在事件处理函数中使用编程式导航 methods: { goToDynamicRoute(id) { this.$router.push({ name: 'DynamicRoute', params: { id } }); }, },
5.接收动态参数：
在动态路由组件中，可以通过 $route.params 来访问传递的动态参数。
<template> <div> <h2>Dynamic Route</h2> <p>Dynamic parameter: {{ $route.params.id }}</p> </div> </template> <script> export default { name: 'DynamicRoute', }; </script>
