vue3配置动态路由

配置动态路由步骤：

1. 安装vue-router插件：

npminstall vue-router

2. 在main.js文件中引入vue-router并注册：

1.  
   import VueRouter from 'vue-router'
2.  
   Vue.use(VueRouter)

3. 在router目录下创建路由配置文件，如router.js。

4. 在router.js文件中，创建路由对象并定义路由规则：

1.  
   import Vue from 'vue'
2.  
   import VueRouter from 'vue-router'
3.  
    
4.  
   Vue.use(VueRouter)
5.  
    
6.  
   const routes = [
7.  
   {
8.  
   path: '/',
9.  
   component: Home
10.  
    },
11.  
    {
12.  
    path: '/about',
13.  
    component: About
14.  
    }
15.  
    ]
16.  
     
17.  
    const router = new VueRouter({
18.  
    routes
19.  
    })
20.  
     
21.  
    export default router

5. 在main.js文件中，引入路由配置文件并将路由对象挂载到Vue实例上：

1.  
   import router from'./router'
2.  
    
3.  
   new Vue({
4.  
   router,
5.  
   render: h => h(App)
6.  
   }).$mount('#app')

6. 在组件中使用路由，如在模板中使用router-link组件定义导航链接，使用router-view组件显示匹配的视图组件。

1.  
   <template>
2.  
   <div>
3.  
   <router-link to="/">Home</router-link>
4.  
   <router-link to="/about">About</router-link>
5.  
   <router-view></router-view>
6.  
   </div>
7.  
   </template>