Pinia+Router学习笔记（十三）

前置路由守卫

没啥说的，所有跳转操作在跳转之前都会走这个函数

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

const routes: Array<RouteRecordRaw> = [
    {
        path: '/',
        name: 'Login',
        alias: ['/root1', '/root2'],
        redirect: (to) => {
            return {
                path: '/user',
                query: {
                    xiaoman: '小满',
                },
            }
        },
    },
    {
        path: '/user',
        name: 'Reg',
        component: () => import('@/components/login.vue'),
    },
]

const router = createRouter({
    history: createWebHashHistory(import.meta.env.BASE_URL),
    routes,
})

const whiteList = ['/']

// 路由守卫
router.beforeEach((to, from, next) => {
    next()
})

export default router

router.beforeEach接受一个回调函数，该回调有三个参数to、from、next。其中to是跳转后的页面信息，from是跳转前的页面信息，next是一个函数，其参数列表为一个字符串或布尔值，也可以直接没有参数。当其参数列表中没有参数时可以直接跳转，接受字符串时将跳转到字符串对应的路由，接受false时拒绝跳转

后置路由守卫

afterEach，除没有next外，参数列表和前置路由守卫相同