Vue2.x与Vue3.x中路由钩子的区别详解
作者:SpringSir 时间:2024-04-30 10:39:52
vue2.x
前置概念:
路由钩子分类
一共分3类, 7个钩子
路由和组件的概念(方便理解钩子函数)
路由和组件是2个概念, 可以粗犷的认为:
路由是浏览器网址
组件是显示在网页上的不同内容
全局路由钩子
router.beforeEach(to, from, next){ } 前置导航守卫
路由进入前
router.afterEach(to, from, next){ } 后置导航守卫
路由进入后
router.beforeResolve(to, from, next){ } 解析守卫
解析组件时, 已经读取所有配置, 前面的关卡都通过了, 准备解析组件前执行
路由配置守卫钩子
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中, 有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
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
优化SQL Server的内存占用之执行缓存
![](https://img.aspxhome.com/file/2023/4/94444_0s.gif)
pymongo insert_many 批量插入的实例
MySQL拼接字符串函数GROUP_CONCAT详解
![](https://img.aspxhome.com/file/2023/3/124063_0s.png)
Alexa排名数据xml接口及其参数说明
python计算两个数的百分比方法
详解pandas中MultiIndex和对象实际索引不一致问题
python 重定向获取真实url的方法
jsp include文件时的一个乱码解决方法
微信小程序实现单个卡片左滑显示按钮并防止上下滑动干扰功能
CentOS7安装mysql5.7解压缩版简明教程
Python socket网络编程TCP/IP服务器与客户端通信
vue面试之new Vue的时候到底做了什么
![](https://img.aspxhome.com/file/2023/0/123130_0s.png)
javascript设计模式交流(二) Prototype Pattern
![](https://img.aspxhome.com/file/UploadPic/200711/29/2007112914633775s.gif)
python网络爬虫实现发送短信验证码的方法
![](https://img.aspxhome.com/file/2023/6/97596_0s.jpg)
python操作excel的包(openpyxl、xlsxwriter)
![](https://img.aspxhome.com/file/2023/1/112741_0s.png)
python pandas库读取excel/csv中指定行或列数据
![](https://img.aspxhome.com/file/2023/6/112366_0s.png)
python3.3使用tkinter开发猜数字游戏示例
Laravel配置全局公共函数的方法步骤
Python Pivot table透视表使用方法解析
![](https://img.aspxhome.com/file/2023/8/131338_0s.jpg)