zoukankan      html  css  js  c++  java
  • Vue Router 导航守卫总结 Better




    什么是导航守卫

    “导航”表示路由正在发生改变。

    类似于 Vue 的生命周期钩子函数,在路由发生改变时触发。



    导航守卫的类别


    全局守卫

    全局守卫,在每一次路由改变时都触发。因为是写在 router文件 当中所以没有办法获得 vue 实例。

    • 全局前置守卫:

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

      简单的说就是:路由进入之前,被调用

    • 全局守卫解析守卫:

      这和 router.beforeEach 类似,区别是在导航被确认之前,同时在所有组件内守卫和异步路由组件被解析之后,解析守卫就被调用。

      简单的说就是:路由解析之前,被调用

    • 全局后置钩子:

      和守卫不同的是,这些钩子不会接受 next 函数也不会改变导航本身。

      简单的说就是:路由进入之后,被调用

    router.beforeEach((to, from, next) => { // 全局前置守卫
      console.log('beforeEach', to, from)
      next()
    })
    
    router.beforeResolve((to, from, next) => { // 全局守卫解析守卫
      console.log('beforeResolve', to, from)
      next()
    })
    
    router.afterEach((to, from) => { // 全局后置钩子
      console.log('afterEach', to, from)
    })
    

    局部守卫(组件内的守卫)

    与生命周期一样,写在组件中。

    beforeRouteEnter (to, from, next) {
      // 不能获取组件实例 `this`,因为当守卫执行前,组件实例还没被创建
      console.log('beforeRouteEnter', to, from)
      next()
    },
    beforeRouteUpdate (to, from, next) {
      console.log('beforeRouteUpdate', to, from)
      next()
    },
    beforeRouteLeave (to, from, next) {
      console.log('beforeRouteLeave', to, from)
      next()
    }
    

    路由独享的守卫

    可以在路由配置上直接定义 beforeEnter 守卫:

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


    导航守卫的生命周期与Vue的生命周期


    全局守卫&&局部守卫执行顺序

    beforeRouteLeave 	// --局部, 发生在路由离开之前
    router.beforeEach 	// 全局
      beforeRouteEnter 	// --局部,因为在 beforeCreate之前,所以不能获取组件实例 `this`
      beforeRouteUpdate 	// --局部,当前组件路由参数发生变化时执行
    router.beforeResolve 	// 全局
    router.afterEach 	// 全局
    

    刷新/ 进入当前页面时

    // ** 刷新当前页面
    router.beforeEach 	// 全局
      beforeRouteEnter 	// 局部,因为在 beforeCreate之前,所以不能获取组件实例 `this`
    router.beforeResolve 	// 全局
    router.afterEach 	// 全局
    
    beforeCreate
    created
    beforeMount
    mounted
    beforeUpdate
    updated
    beforeDestroy
    destroyed
    

    修改当前页面路由参数时

    beforeCreate
    created
    beforeMount
    mounted
    
    // ** 修改路由参数
    router.beforeEach 	// 全局
      beforeRouteUpdate 	// 局部,当前组件路由参数发生变化时执行
    router.beforeResolve 	// 全局
    router.afterEach 	// 全局
    

    离开当前页面时

    beforeCreate
    created
    beforeMount
    mounted
    beforeUpdate
    updated
    
    // ** 离开当前页面
      beforeRouteLeave 	// 局部, 发生在路由离开之前
    router.beforeEach 	// 全局
    router.beforeResolve 	// 全局
    router.afterEach 	// 全局
    
    beforeDestroy
    destroyed
    
  • 相关阅读:
    【bzoj3158】千钧一发 最小割
    【bzoj2186】[Sdoi2008]沙拉公主的困惑 欧拉函数
    【bzoj1221】[HNOI2001] 软件开发 费用流
    【bzoj4176】Lucas的数论 莫比乌斯反演+杜教筛
    【bzoj4916】神犇和蒟蒻 杜教筛
    【bzoj3944/bzoj4805】Sum/欧拉函数求和 杜教筛
    【bzoj4869】[Shoi2017]相逢是问候 扩展欧拉定理+并查集+树状数组
    【bzoj3926】[Zjoi2015]诸神眷顾的幻想乡 广义后缀自动机
    【bzoj2555】SubString 后缀自动机+LCT
    【bzoj3277/bzoj3473】串/字符串 广义后缀自动机
  • 原文地址:https://www.cnblogs.com/huangtq/p/15565976.html
Copyright © 2011-2022 走看看