Vue2.x和Vue3.x-路由钩子详讲及对比

vue2.x

前置概念:

路由钩子分类

• 一共分3类, 7个钩子

---

路由和组件的概念(方便理解钩子函数)

路由和组件是2个概念, 可以粗犷的认为:

• 路由是浏览器网址
• 组件是显示在网页上的不同内容

---

全局路由钩子

1. router.beforeEach(to, from, next){ } 前置导航守卫

   • 路由进入前

2. router.afterEach(to, from, next){ } 后置导航守卫

   • 路由进入后

3. router.beforeResolve(to, from, next){ } 解析守卫

   
   • 解析组件时, 已经读取所有配置, 前面的关卡都通过了, 准备解析组件前执行

---

路由配置守卫钩子

• beforeEnter() 在读取路由配置信息前调用
  • 在beforeCreate()前执行

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

---

组件内的守卫钩子

1. beforeRouteEnter(to, from, next){ } 进入组件前

   1. 默认不能获取组件实例 this

   2. 但是以下办法可以访问

      beforeRouteEnter(to, from, next){ 
      
        // next()的回调函数,在进入路由,实例化执行
      	next(vm => {
          // vm等价于当前组件this
        })
      }
      

2. beforeRouteUpdate(to, from, next){ } 修改组件前

   1. 当前组件依然在使用
   2. 路由地址改变
   3. 满足以上2个条件才会执行

3. beforeRouteLeave(to, from, next){ } 离开组件前

---

路由钩子执行顺序

eg: 从A组件跳转到B组件顺序

1. beforeRouteLeave() 先离开A组件
2. beforeEach() 全局-前置导航守卫
3. beforeEnter() 读取路由配置信息前 (读取B路由信息)
4. beforeRouteEnter() 进入组件前
5. beforeResolve() 解析守卫
6. afterEach() 全局-后置导航守卫

---

如果B路有更新, 每次都会执行以下三个钩子:

1. beforeEach() 全局 - 前置导航守卫
2. beforeResolve() 全局 - 解析守卫
3. beforeRouteUpdate() 组件内 - 修改组件前

---

vue3.x

• vue3.x相对于vue2.x, 只有小部分不同, 此处只针对不同做讲解

---

对比变化图

---

区别补充:

• 在Vue2.x中, 有3个组件, 如果A组件跳转到B组件, B组件中存在子组件:
  • B组件中的子组件不会触发路由钩子
• 在Vue3.x中, 有3个组件, 如果A组件跳转到B组件, B组件中存在子组件:

  • B组件中的子组件会触发路由钩子: onBeforeRouteUpdate和onBeforeRouteLeave

  • B组件中的子组件不会触发路由钩子

• 在Vue3.x中, 有3个组件, 如果A组件跳转到B组件, B组件中存在子组件:
  • B组件中的子组件会触发路由钩子: onBeforeRouteUpdate和onBeforeRouteLeave