Vue Router 4

安装

pnpm i vue-router@4

使用

src同级下创建目录router/index.ts

//引入路由对象
import { createRouter, createWebHistory, createWebHashHistory, createMemoryHistory, RouteRecordRaw } from 'vue-router'
 
//vue2 mode history vue3 createWebHistory
//vue2 mode  hash  vue3  createWebHashHistory
//vue2 mode abstact vue3  createMemoryHistory
 
//路由数组的类型 RouteRecordRaw
// 定义一些路由
// 每个路由都需要映射到一个组件。
const routes: Array<RouteRecordRaw> = [{
    path: '/',
    component: () => import('../components/a.vue')
},{
    path: '/register',
    component: () => import('../components/b.vue')
}]

const router = createRouter({
    history: createWebHistory(),
    routes
})
 
//导出router
export default router

注意区分createWebHistory与createWebHashHistory

在main.ts里通过插件的方式引入router/index.ts的默认导出

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

const app = createApp(App)
app.use(router)
app.mount('#app')

其他

配置404页面

{    
    path: '/:pathMatch(.*)*', 
    name: '404', 
    component: () => import('@/views/error/404.vue')
}

具体事项

路由传参

1. query

主页面中

import {useRouter} from 'vue-router'
const router = useRouter()
router.push({
    path: '/login',
    query: {
        id: 1,
        content: '你好'
    }
})

Login.vue页面中

import {useRoute} from 'vue-router'
const route = useRoute()
const id = route.query.id
const content = route.query.content

2. params

index.ts中

const routes: Array<RouteRecordRaw> = [{
    path: '/',
    component: () => import('../components/a.vue')
},{
    path: '/login/:id',
    component: () => import('../components/login.vue')
}]

主页面中

import {useRouter} from 'vue-router'
const router = useRouter()
router.push({
    name: 'login',
    params: {
        id: 1,
        content: '你好'
    }
})

Login.vue页面中

import {useRoute} from 'vue-router'
const route = useRoute()
const id = route.params.id
const content = route.params.content

命名视图

类似于插槽slot