PHP论坛 › Vue › Vue 3 路由配置

admin 发表于 2022-4-12 10:13:18

Vue 3 路由配置

1：创建路由文件router.js


2:引入相关模块

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


3：添加路由配置


export default createRouter({
    history: createWebHashHistory(),
    routes :[{
   
            path: '/user',
            component: User
   
    }]
})


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

const routers =[
    {
      path: '/',
      component: Main,
      children:[
            {
                path:'/user/add',
                component:AddUser
            },{
                path: '/user/edit',
                component: EditUser
            }
      ]
    },
    {
      path:'/system/set',
      component:System
    },
    {
      path: '/system/mv',
      component: System
    },
    {
      path:'/user/list',
      component:UserList
    },{
      path: '/user',
      component: User
    }
]

export default createRouter({
    history: createWebHashHistory(),
    routes :routers
})



4：使用模块

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

查看完整版本: Vue 3 路由配置