vue3中7种路由守卫的使用大全举例

路由守卫有哪几种？

路由守卫(导航守卫)分为三种：全局守卫（3个）、路由独享守卫（1个）、组件的守卫（3个）

路由守卫的三个参数

to：要跳转到的目标路由

from：从当前哪个路由进行跳转

next：不做任何阻拦，直接通行

注意： 必须要确保 next函数 在任何给定的导航守卫中都被调用过一次。它可以出现多次，但是只能在所有的逻辑路径都不重叠的情况下，否则会报错。

案例：

router.beforeEach((to, from, next) => {
 if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })
 else next()
})

一、全局路由守卫

全局路由守卫有三个：全局前置守卫，全局后置守卫,全局解析守卫

全局前置守卫

1.使用方式：main.js中配置,在路由跳转前触发，这个钩子作用主要是用于登录验证，也就是路由还没跳转提前告知，以免跳转了再通知就为时已晚

2.代码:

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

3.例子:做登录判断

router.beforeEach((to,from,next)=>{
 if(to.path == '/login' || to.path == '/register'){
   next();
 }else{
   alert('您还没有登录，请先登录');
   next('/login');
 }
})

全局后置守卫

1.使用方式：main.js中配置,和beforeEach相反，它是在路由跳转完成后触发，它发生在beforeEach和beforeResolve之后，beforeRouteEnter（组件内守卫）之前。钩子不会接受next函数也不会改变导航本身

2.代码:

router.afterEach((to,from)=>{<!--{C}％3C!％2D％2D％20％2D％2D％3E-->})

全局解析守卫

1.使用方式：main.js中配置,这个钩子和beforeEach类似，也是路由跳转前触发，区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，即在 beforeEach 和 组件内beforeRouteEnter 之后，afterEach之前调用。

2.代码:

router.beforeResolve((to,from,next)=>{<!--{C}％3C!％2D％2D％20％2D％2D％3E-->})

一、组件内守卫

组件内守卫有个三个：路由进入之前beforeRouteEnter，路由离开时beforeRouteLeave,页面更新时beforeRouteUpdate

• beforeRouteEnter(to, from, next)

1.使用方式：在组件模板中使用,跟methods: {}等同级别书写，组件路由守卫是写在每个单独的vue文件里面的路由守卫

2.代码:

beforeRouteEnter(to, from, next) {
   // 在组件生命周期beforeCreate阶段触发
   console.log('组件内路由前置守卫 beforeRouteEnter', this) // 访问不到this
   next((vm) => {
     console.log('组件内路由前置守卫 vm', vm) // vm 就是this
   })
 },

beforeRouteUpdate(to, from, next)

1.使用方式：在组件模板中使用,跟methods: {}等同级别书写，组件路由守卫是写在每个单独的vue文件里面的路由守卫

2.代码:

beforeRouteUpdate (to, from, next) {
   // 同一页面，刷新不同数据时调用，
   // 可以访问组件实例
}

• beforeRouteLeave(to, from, next)

1.使用方式：在组件模板中使用,跟methods: {}等同级别书写，组件路由守卫是写在每个单独的vue文件里面的路由守卫

2.代码:

beforeRouteLeave (to, from, next) {
   // 导航离开该组件的对应路由时调用
   // 可以访问组件实例
}

路由独享守卫

路由独享守卫只有一个:进入路由时触发beforeEnter

• 路由独享守卫 beforeEnter(to, from, next)

1.使用方式：在router.js中使用,路由独享守卫是在路由配置页面单独给路由配置的一个守卫

2.代码

const router = new VueRouter({
 routes: [
   {
     path: '/foo',
     component: Foo,
     beforeEnter: (to, from, next) => {
       // ...
     }
   }
 ]
})

导航解析流程

1.触发进入其它路由
2.调用要离开路由的组件守卫beforeRouteLeave
3.调用全局的前置守卫beforeEach
4.在重用的组件里调用 beforeRouteUpdate
5.在路由配置里的单条路由调用 beforeEnter
6.解析异步路由组件
7.在将要进入的路由组件中调用beforeRouteEnter
8.调用全局的解析守卫beforeResolve
9.导航被确认
10.调用全局的后置钩子afterEach
11.触发 DOM 更新mounted
12.执行beforeRouteEnter守卫中传给 next的回调函数

补充：下面在看看三个组件内部守卫

• beforeRouteEnter

• beforeRouteUpdate

• beforeRouteLeave

export default {
 setup() {},
 mounted(){
 },
 methods: {
   goBack() {
     this.$router.go(-1)
   },
 },
//  组件内守卫
beforeRouteEnter(to ,from , next){
   // next() 可以通过内部的回调函数访问实例
    // 在渲染该组件的对应路由被验证前调用
   // 不能获取组件实例 `this` ！
   // 因为当守卫执行时，组件实例还没被创建！
   window.console.log(this) // undefined
   window.console.log(to)
   window.console.log(from)
   next((e)=> {
       window.console.log(e) // 当前的this
   })
},
beforeRouteUpdata(to ,from){
   // 无 next
    // 在当前路由改变，但是该组件被复用时调用
   // 举例来说，对于一个带有动态参数的路径 `/users/:id`，在 `/users/1` 和 `/users/2` 之间跳转的时候，
   // 由于会渲染同样的 `UserDetails` 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
   // 因为在这种情况发生的时候，组件已经挂载好了，导航守卫可以访问组件实例 `this`
   window.console.log(this)
   window.console.log(to)
   window.console.log(from)
},
beforeRouteLeave(to ,from){
   // 无 next
   // 在导航离开渲染该组件的对应路由时调用
   // 与 `beforeRouteUpdate` 一样，它可以访问组件实例 `this`
   window.console.log(this)
   window.console.log(to)
   window.console.log(from)
},
}

解析 ： 这三个差不多就放在一起还有个对照

1.首先来说说执行时机 ： 路由独享守卫的后面 调用这三个守卫 。

2. 书写位置 ： 在单个vue文件内部 ， 与 methods , 等 api 同级

3. 只有 beforeRouteEnter 参数 有 next , 因为这个路由不能访问this ，于是就有了next 函数 ， 可以向里面传递一个回调函数 ， 回调函数的参数就是 this , 可以看代码， 其他两个组件内部守卫 都可以的访问this , 所以就没有必要在去加next ,(官网意思就是这个)

结尾:

vue2和vue3的写法基本一致没有改变

来源：https://blog.csdn.net/weixin_40808668/article/details/127992841