Vue导航守卫使用教程详解

作用：通过跳转或取消的方式守卫导航

植入方式：

• 全局守卫
• 单个路由独享守卫
• 组件级守卫

守卫参数

• to: 即将要进入的目标路由
• from: 当前导航即将要离开的路由
• next(可选): 不传参默认去to路由，传参可改变目标路由

注意：可以向任意给定的导航守卫传递next，但是next的使用过程容易出错，需要确保next在任何给定的导航守卫中都被严格调用一次。（可以出现多于一次，但是只能在所有逻辑路径都不重叠的情况，否则钩子永远不会被解析或者报错）

守卫返回值

• false: 取消当前导航
• 路由地址：导航中断，跳转到返回的路由地址。（例如：return {name:‘login’}跳转到登陆页）
• undefined/true: 导航有效，调用下一个导航守卫
• 注意：如果有错误，会取消导航并调用router.onError()

全局守卫

全局前置守卫

const router = createRouter({...})
router.beforeEach((to, from) => {
})

• 导航触发时，全局前置守卫按照创建顺序调用
• 守卫是异步解析执行，导航在所有守卫resolve完之前一直处于等待

全局解析守卫

router.beforeResolve(async to => {
})

• 在导航被确认之前，在所有组件内守卫和异步路由组件被解析之后调用
• 是获取数据或避免用户无法进入页面时执行操作的理想位置

全局后置钩子

router.afterEach((to, from) => {
})

• 和守卫的区别：不会接收next函数，也不会改变导航
• 作用：分析/更改页面标题，声明页面等

单个路由独享守卫

const routes = [{
    path: '/users/:id',
    component: UserDetails,
    beforeEnter: (to, from) => {
    },
    // beforeEnter: [removeQuery, removeHash]
}]

• 只在进入路由时触发，不会在params/query/hash改变时触发（如：/user/1 -> /user/2）
• 传参：可以传递函数数组，有利于重用守卫

组件级守卫

• beforeRouteEnter: 在渲染该组件对应路由被验证前调用，不能获取this
• beforeRouteUpdate: 在组件被复用时调用，可以访问this
• beforeRouteLeave: 在导航离开该组件路由时调用，可以访问this

注意：beforeRouteEnter 是支持给 next 传递回调的唯一守卫

beforeRouteEnter(to, from, next) {
    next(vm => {
        // 通过'vm'访问组件实例
    })
}

离开守卫：通常用来预防用户在还未保存修改前突然离开，可以通过返回false来取消

完整的导航解析流程

1. 导航被触发
2. 在离开的组件里调用 beforeRouteLeave 守卫
3. 调用全局的 beforeEach 守卫
4. （如果是重用组件）调用 beforeRouteUpdate 守卫
5. 在路由配置里调用 beforeEnter
6. 解析异步路由组件
7. 在被激活的组件里调用 beforeRouteEnter
8. 调用全局的 beforeResolve 守卫
9. 导航被确认
10. 调用全局的 afterEach 钩子
11. 触发 DOM 更新
12. 调用 beforeRouteEnter 守卫中传给 next 的回调函数，创建好的组件实例会作为回调函数的参数传入

总结

全局守卫

• beforeEach
• beforeResolve
• beforeAfter：不接收next

单个路由独享守卫

• beforeEnter：路由参数变化不触发

组件级守卫

• beforeRouteEnter: 不可访问this
• beforeRouteUpdate：可以访问this
• beforeRouteLeave：可以访问this

到此这篇关于Vue导航守卫使用教程详解的文章就介绍到这了,更多相关Vue导航守卫内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！