PHP技术论坛

标题: Vue 3 路由配置 [打印本页]
作者: admin    时间: 2022-4-12 10:13
标题: Vue 3 路由配置


1：创建路由文件router.js


2:引入相关模块

  1. import {createRouter,createWebHashHistory} from 'vue-router'
复制代码



3：添加路由配置


  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. ]

  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');
复制代码






欢迎光临 PHP技术论坛 (http://php.hh85.com/) Powered by Discuz! X3.2