关于vue的路由守卫关于vue路由守卫 vue的路由守卫一共有3钟：一、全局路由守卫 1、beforeEach 全局前

关于vue路由守卫

vue的路由守卫一共有3钟：

一、全局路由守卫

1、beforeEach

全局前置守卫，在路由跳转前触发

使用router.beforeEach注册全局前置守卫

router.beforeEach((to, from, next) => {
  console.log('到哪去:', to);
  console.log('从哪来:', from);
  next();
})

参数：

to: 即将要进入的目标路由参数

from: 当前导航正要离开的路由对象

next: 放行，不使用会阻塞路由

next（）方法的几种情况

next(): 进行管道中的下一个钩子。
next(false): 中断当前的导航。回到 from 路由对应的地址。
next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址，可传递的参数与 router.push 中选项一致。
next(error): 导航终止，且该错误会被传递给 router.onError() 注册过的回调。

定义多个守卫

全局前置守卫可以定义多个，根据创建顺序调用。在所有守卫完成之前导航一直处于等待中。

下面这个例子中我们就定义了两个 beforeEach 全局前置守卫。可以看到，只有在两秒以后分别打印出两条日志后才进行页面的跳转。

//index.js
router.beforeEach((to, from, next) => {
 setTimeout(() => {
  console.log('🚀🚀~ beforeEach1');
  next();
 }, 1000);
});
router.beforeEach((to, from, next) => {
  setTimeout(() => {
    console.log('🚀🚀~ beforeEach2');
    next();
   }, 1000);
});

除了 beforeEach 全局前置守卫之外，其他的全局守卫都可以定义多个，并且在所有守卫完成之前导航一直处于等待中，其他的钩子函数就不进行演示了。

2、beforeResolve

全局解析守卫，在路由跳转前， 组件内守卫 和 异步路由组件 被解析之后触发，它同样在 每次导航 时都会触发。

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

3、afterEach

全局后置钩子，它发生在路由跳转完成后，beforeEach 和 beforeResolve 之后，beforeRouteEnter（组件内守卫）之前。它同样在 每次导航 时都会触发。

router.afterEach((to, from) => {
  console.log('afterEach:');
})

二、路由守卫

需要在路由的配置里定义beforeEnter守卫，在beforeEach之后触发，不会再路由参数改变时触发

{
  path: '/xxx',
  component: () => import('../components/xxx.vue'),
  beforeEnter: (to, from) => {
   console.log('beforeEnter ');
  },
}

三、组件守卫

定义在组件内部的守卫

beforeRouteEnter

  //xxx.vue
  //该守卫内访问不到组件的实例，也就是 this 为 undefined，也就是他在 beforeCreate 生命周期前触发。
  beforeRouteEnter(to, from，next) {
    console.log('beforeRouteEnter');
  },

该钩子在全局守卫 beforeEach 和路由守卫 beforeEnter 之后，全局 beforeResolve 和全局 afterEach 之前调用

beforeRouteLeave

  //xxx.vue
  //this 已经可用了，所以给 next 传递回调就没有必要了
  beforeRouteLeave(to, from) {
    console.log('beforeRouteLeave');
  },

关于vue的路由守卫