Vue 3 路由配置

admin

1：创建路由文件router.js


2:引入相关模块

1. import {createRouter,createWebHashHistory} from 'vue-router'

复制代码

3：添加路由配置

1. 
   
2. export default createRouter({
   
3.     history: createWebHashHistory(),
   
4.     routes :[{
   
5.    
   
6.             path: '/user',
   
7.             component: User
   
8.    
   
9.     }]
   
10. })
    

复制代码

也可以把配置文件独立创建

1. const routers =[
   
2.     {
   
3.         path: '/',
   
4.         component: Main,
   
5.         children:[
   
6.             {
   
7.                 path:'/user/add',
   
8.                 component:AddUser
   
9.             },{
   
10.                 path: '/user/edit',
    
11.                 component: EditUser
    
12.             }
    
13.         ]
    
14.     },
    
15.     {
    
16.         path:'/system/set',
    
17.         component:System
    
18.     },
    
19.     {
    
20.         path: '/system/mv',
    
21.         component: System
    
22.     },
    
23.     {
    
24.         path:'/user/list',
    
25.         component:UserList
    
26.     },{
    
27.         path: '/user',
    
28.         component: User
    
29.     }
    
30. ]
    
31. 
    
32. export default createRouter({
    
33.     history: createWebHashHistory(),
    
34.     routes :routers
    
35. })
    

复制代码

4：使用模块

1. import { createApp } from 'vue'
   
2. import App from './App.vue'
   
3. import router from "@/router"; //引入上面的router.js模块
   
4. let vm = createApp(App);
   
5. vm.use(router) //使用模块
   
6.    vm.mount('#app');
   

复制代码