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
    
  • 相关阅读:
    游戏资源贴
    赠云风大侠
    微软ad域的初步认识
    WAMP 80端口被MicrosoftHTTPAPI/2.0占用的解决办法
    单点登录的一系列尝试及最终解决
    母版页缓存问题
    Vs2012如何创建数据库
    Request.QueryString 不能像使用方法那样使用不可调用
    将textbox中的光标移动到当前输入的文本后
    用户控件学习笔记
  • 原文地址:https://www.cnblogs.com/huangtq/p/15565976.html
Copyright © 2011-2022 走看看