全局路由守卫的使用

loveAsuka_

已于 2023-01-12 08:43:46 修改

阅读量503

点赞数

文章标签：前端 javascript vue.js

于 2023-01-12 08:41:58 首次发布

本文链接：https://blog.csdn.net/m0_52182385/article/details/128653460

版权

路由守卫是什么？

路由守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的, 单个路由独享的, 或者组件级的。

全局路由守卫的使用

所谓全局路由守卫，就是小区大门，整个小区就这一个大门，你想要进入其中任何一个房子，都需要经过这个大门的检查
全局路由守卫有个两个：一个是全局前置守卫，一个是全局后置守卫，钩子函数按执行顺序包括beforeEach、beforeResolve、afterEach三个。


router.beforeEach((to, from, next) => {
  console.log(to) => // 到哪个页面去？
  console.log(from) => // 从哪个页面来？
  next() => // 一个回调函数
}
router.afterEach（to，from） = {}

[beforeEach]：在路由跳转前触发，参数包括to,from,next（参数会单独介绍）3个，这个钩子作用主要是用于登录验证，就是路由还没跳转前告知，跳转后再通知就晚了。
[beforeResolve]：在组件被解析后，这个钩子函数和beforeEach类似，也是路由跳转前触发，参数也是to,from,next三个。
[afterEach]：和beforeEach相反，它是在路由跳转完成后触发，参数包括to,from没有next,它发生在beforeEach和beforeResolve之后，beforeRouteEnter之前。
三个参数：to：去哪，from：从哪来，next：下一步
设置

const router = new VueRouter();
// 全局前置守卫
router.beforeEach((to, from, next) => {
    ...
    next(); //所有前置守卫最后都需要调用next()进入下一个管道
})

// 全局后置守卫，没有next
router.afterEach((to, from) => {
    ...
})

// 全局前置解析守卫，和router.beforeEach类似，在所有组件内守卫以及异步路由组件解析完后触发
router.beforeResolve((to, from, next) => {
    ...
    next();
})