vue3实现动态路由

Vue 3 是一种流行的 JavaScript 框架，用于构建用户界面。它提供了一种简洁、高效的方式来实现动态路由。下面是 Vue 3 实现动态路由的步骤：

1. 安装 Vue Router：首先，你需要安装 Vue Router。可以使用 npm 或者 yarn 进行安装，命令如下：

   npm install vue-router

或者

   yarn add vue-router

2. 创建路由配置文件：在你的项目中创建一个路由配置文件，例如 `router.js`。在该文件中，导入 Vue 和 Vue Router，并创建一个新的路由实例。然后，定义你的路由规则和对应的组件。例如：

   import { createRouter, createWebHistory } from 'vue-router';
   import Home from './components/Home.vue';
   import About from './components/About.vue';

   const routes = [
     { path: '/', component: Home },
     { path: '/about', component: About }
   ];

   const router = createRouter({
     history: createWebHistory(),
     routes
   });

   export default router;

3. 在主应用程序中使用路由：在你的主应用程序中，导入路由配置文件，并将其作为插件使用。例如：

   import { createApp } from 'vue';
   import App from './App.vue';
   import router from './router';

   const app = createApp(App);
   app.use(router);
   app.mount('#app');

4. 在组件中使用动态路由：在你的组件中，可以使用 `<router-link>` 组件来创建链接，并使用 `to` 属性指定目标路由。例如：

   <template>
     <div>
       <router-link to="/">Home</router-link>
       <router-link to="/about">About</router-link>
     </div>
   </template>

你还可以使用 `<router-view>` 组件来显示当前路由对应的组件。例如：

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

这样，你就可以实现动态路由了。当用户点击链接时，Vue Router 会根据路由规则加载对应的组件，并在 `<router-view>` 中显示。