vue3七种路由守卫

一、路由守卫有哪几种？

• window.location.href = “https://blog.csdn.net/2301_76459194?spm=1011.2266.3001.5343”
• 路由守卫(导航守卫)分为三种：全局守卫（3个）、路由独享守卫（1个）、组件的守卫（3个）
• 全局路由守卫有三个：全局前置守卫beforeEach，全局后置守卫afterEach,全局解析守卫beforeResolve
• 组件内守卫有个三个：路由进入前beforeRouteEnter，路由离开时beforeRouteLeave,页面更新时beforeRouteUpdate
• 路由独享守卫只有一个:进入路由时触发beforeEnter

二、路由守卫的三个参数

• to：要跳转到的目标路由的详细信息
• from：从当前哪个路由进行跳转的详细信息
• next：不做任何阻拦，直接通行，也可指定跳转的路由

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

例如：

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

三、路由守卫详解

1、全局路由守卫(全局前置守卫)

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

2、全局路由守卫(全局后置守卫)

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

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

3、全局路由守卫(全局解析守卫)

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

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

4、组件路由守卫(路由进入前)

组件路由守卫是写在每个单独的vue文件里面的路由守卫

使用方式：在组件生命周期beforeCreate阶段触发

beforeRouteEnter(to, from, next) {
    // 在组件生命周期beforeCreate阶段触发
    next()
  },

5、组件路由守卫(页面更新时)

使用方式：同一页面，刷新不同数据时调用

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

6、组件路由守卫(路由离开时)

使用方式：导航离开该组件的对应路由时调用

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

7、路由独享守卫

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

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的回调函数