Vue3路由

创建路由

1.创建路径
2.在main中引用路由

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

const router = createRouter({
    history: createWebHistory(),
    routes: [
      {
        path: '/',
        redirect: '/home',
      },
      {
        path: '/home',
        component: () => import('@/views/xstech/Home')
      }
    ]
})

router.beforeEach((to, from, next) => {
    to.last = from
    next()
})

export default router

main.js

import {createApp} from 'vue'
import Application from './Application.vue'

const app = createApp(Application)

app.use(router)

路由模式

1.history模式
history模式网页路径为 http://xxx/Home

使用createWebHistory函数创建

import {createRouter, createWebHistory} from 'vue-router'
const router = createRouter({
    history: createWebHistory(),
    routes: []
})

2.hash模式
hash模式网页路径为 http://xxx/#/Home

使用createWebHashHistory函数创建

import {createRouter, createWebHashHistory} from 'vue-router'
const router = createRouter({
    history: createWebHashHistory(),
    routes: []
})

创建时间 2022年3月1日
更新时间 2022年3月1日