Vue2.x与Vue3.x中路由钩子的区别详解

作者:SpringSir 时间:2024-04-30 10:39:52 

vue2.x

前置概念:

路由钩子分类

一共分3类, 7个钩子

Vue2.x与Vue3.x中路由钩子的区别详解

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

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

  • 路由是浏览器网址

  • 组件是显示在网页上的不同内容

全局路由钩子

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

路由进入前

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

路由进入后

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

Vue2.x与Vue3.x中路由钩子的区别详解 

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

路由配置守卫钩子

Vue2.x与Vue3.x中路由钩子的区别详解

beforeEnter() 在读取路由配置信息前调用

在beforeCreate()前执行


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

组件内的守卫钩子

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

默认不能获取组件实例 this

但是以下办法可以访问


beforeRouteEnter(to, from, next){

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

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

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

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

路由钩子执行顺序

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

beforeRouteLeave() 先离开A组件

beforeEach() 全局-前置导航守卫

beforeEnter() 读取路由配置信息前 (读取B路由信息)

beforeRouteEnter() 进入组件前

beforeResolve() 解析守卫

afterEach() 全局-后置导航守卫

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

beforeEach() 全局 - 前置导航守卫

beforeResolve() 全局 - 解析守卫

beforeRouteUpdate() 组件内 - 修改组件前

vue3.x

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

对比变化图

Vue2.x与Vue3.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

来源:https://blog.csdn.net/weixin_46873254/article/details/120296035

标签:Vue2.x,Vue3.x,路由钩子
0
投稿

猜你喜欢

  • 优化SQL Server的内存占用之执行缓存

    2024-01-12 19:13:27
  • pymongo insert_many 批量插入的实例

    2023-05-30 04:27:43
  • MySQL拼接字符串函数GROUP_CONCAT详解

    2024-01-27 18:21:56
  • Alexa排名数据xml接口及其参数说明

    2008-11-07 13:03:00
  • python计算两个数的百分比方法

    2021-06-20 16:39:45
  • 详解pandas中MultiIndex和对象实际索引不一致问题

    2021-07-10 20:43:27
  • python 重定向获取真实url的方法

    2022-10-25 03:24:46
  • jsp include文件时的一个乱码解决方法

    2024-03-27 19:34:28
  • 微信小程序实现单个卡片左滑显示按钮并防止上下滑动干扰功能

    2024-04-18 10:03:54
  • CentOS7安装mysql5.7解压缩版简明教程

    2024-01-20 14:57:18
  • Python socket网络编程TCP/IP服务器与客户端通信

    2023-09-13 01:46:02
  • vue面试之new Vue的时候到底做了什么

    2024-06-05 15:31:27
  • javascript设计模式交流(二) Prototype Pattern

    2007-11-29 14:01:00
  • python网络爬虫实现发送短信验证码的方法

    2021-03-23 23:18:54
  • python操作excel的包(openpyxl、xlsxwriter)

    2023-05-22 09:12:07
  • python pandas库读取excel/csv中指定行或列数据

    2022-10-11 21:05:04
  • python3.3使用tkinter开发猜数字游戏示例

    2023-09-05 06:53:02
  • Laravel配置全局公共函数的方法步骤

    2023-11-15 01:20:42
  • Python Pivot table透视表使用方法解析

    2021-06-21 10:22:59
  • 一文带你掌握Python中多线程和线程池的使用方法

    2022-10-20 21:53:09
  • asp之家 网络编程 m.aspxhome.com