vue3 - 39.router.9 - 导航前置 / 后置守卫

全局前置守卫：router.beforeEach

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

to: router即将要进入路由的页面
from: router当前导航即将要离开的页面
next: 执行过程中下一个狗子，如果全部执行完毕了，则导航的状态是confirmed
next(false): 中断当前导航，如果当前浏览器地址改变了，或者用户点击前进后退按钮，则url地址会重置到from路由对应的地址
next('/'): 或者next({path:'/'})，跳转到一个不同的地址，当前导航倍中断，然后进行一个新的导航

案例：

在登录页面中当表单验证通过的时候，获取接口的token并本地存储

main.ts:

// 权限判断
import router from '../../router'
const whiteList = ['/'] // 配置白名单
router.beforeEach((to,from,next) => {
    if(whiteList.includes(to.path) || sessionStorage.getItem('token')){
        next()
    } else {
        next('/')
    }
})

全局后置守卫：router.afterEach

完整案例：

安装less: npm install less less-loader -D

log