vue监听路由变化时watch方法会执行多次的原因及解决
作者:๘࿆꧁༺༼蜡笔小旧༽ 时间:2024-05-05 09:10:24
目录
需求描述:
需求解析:
解决需求
问题解决
本人前端菜鸟一名,一直致力于不间断的生产管理后台的bug,并以此自勉自励。近几天接到一个需求,网上也搜了很多例子,但是没有从根本上解决。在这里记录一下我自己的解决的过程,这也是第一次在掘金发言,求轻虐。
需求描述:
有A、B两个页面,需要将A页面的orderId用路由传参的方式传入到B页面执行数据关联查询,然后显示在B页面
需求解析:
如果是你,你拿到这个需求,应该很容易想到在B页面对路由变化做watch,然后获取参数执行查询数据的方法完事。
解决需求
A页面中:
const route = {
name: 'BpageName',
params: { orderId: this.tableData[index].id },
meta: {
title: 'B页面'
}
}
this.$router.push(route)
push一个路由重新打开B页面
然后B页面中接受路由传参:
@Watch('$route.params.packageId')
routeParamsChanged(newParams: any, oldParams: any) :void { // 通过监听传参的变化来重新复制参数
if (newParams) {
this.getList(newParams)
}
}
看起来是不是很简单?
但是问题来了,因为B页面做了keep-alive页面缓存,第一次路由切换的时候routeParamsChanged方法只执行一次,达到了预期效果。但是,如果关闭B页面或者不关闭B页面的情况下再从A页面跳转到B页面的情况下就会触发两次或多次routeParamsChanged方法。
查了很多资料,vue项目watch内的函数重复触发问题 这里有解释造成这种情况的原因。
解决方法1: 判断fullPath是不是A页面
if (this.$route.fullPath === 'A页面路由路径') {
// do something
}
怀着激动的心情去试了试
@Watch('$route')
routeParamsChanged(newParams: any, oldParams: any) :void { // 通过监听传参的变化来重新复制参数
if (newParams === '/Apage') {
this.getList(newParams)
}
}
结果还是不行,routeParamsChanged方法还是会执行两次或多次。 解决方法2 添加一个flag参数来判断页面是否是active状态,使用keep-alive缓存的组件只会触发activated和deactivated事件,所以就在这两个事件触发时把flag置为true和false,只有在flag为true的时候才执行getList()。
private activatedFlag: boolean = false
activated () {
this.activatedFlag = true;
}
deactivated () {
this.activatedFlag = false;
}
@Watch('$route')
routeParamsChanged(newParams: any, oldParams: any) :void { // 通过监听传参的变化来重新复制参数
if (newParams && this.activatedFlag) {
this.getList(newParams)
}
}
这回改解决了吧?结果还是不行,routeParamsChanged方法还是会执行两次或多次。 崩溃ing.........
问题解决
借鉴了上面的解决方法2,最终在activated ()生命周期钩子函数中取实现获取参数且调用获取数据的方法即可,都不用去监听路由的变化,只要获取了this.$route.params.orderId就去获取数据。
private activatedFlag: boolean = false
activated () {
this.activatedFlag = true
if (this.$route.params.orderId && this.activatedFlag) {
this.getList(this.$route.params.orderId)
}
}
deactivated () {
this.activatedFlag = false;
}
大功告成,终于解决了。大佬们求轻吐槽代码,有更好的意见或建议,欢迎评论留言指导。
来源:https://juejin.cn/post/6948684670225940487
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
pytorch中F.avg_pool1d()和F.avg_pool2d()的使用操作
![](https://img.aspxhome.com/file/2023/3/87823_0s.png)
vue实现简单的登录弹出框
![](https://img.aspxhome.com/file/2023/8/123928_0s.jpg)
Python自然语言处理 NLTK 库用法入门教程【经典】
如何实现某些页面只让特定的用户浏览?
详解PHP实现HTTP服务器过程
根据选择的checkbox列出选择的值
![](https://img.aspxhome.com/file/UploadPic/20087/30/200873013437517s.jpg)
python 点云地面点滤波-progressive TIN densification(PTD)算法介绍
![](https://img.aspxhome.com/file/2023/8/96918_0s.png)
python Crypto模块的安装与使用方法
![](https://img.aspxhome.com/file/2023/7/114487_0s.png)
初识python的numpy模块
Python全栈之队列详解
![](https://img.aspxhome.com/file/2023/5/85385_0s.png)
Django admin管理工具TabularInline类用法详解
![](https://img.aspxhome.com/file/2023/4/133224_0s.jpg)
基于pandas将类别属性转化为数值属性的方法
![](https://img.aspxhome.com/file/2023/0/130750_0s.jpg)
python3读取autocad图形文件.py实例
![](https://img.aspxhome.com/file/2023/2/101272_0s.jpg)
javascript在myeclipse中报错的解决方法
微信小程序图片左右摆动效果详解
![](https://img.aspxhome.com/file/2023/6/56026_0s.gif)
Python实现的微信好友数据分析功能示例
![](https://img.aspxhome.com/file/2023/0/101480_0s.png)
如何安装SQL Server 2012群集
![](https://img.aspxhome.com/file/2023/5/129315_0s.png)
js仿支付宝多方框输入支付密码效果
![](https://img.aspxhome.com/file/2023/0/135630_0s.gif)
Python使用pptx实现复制页面到其他PPT中
![](https://img.aspxhome.com/file/2023/4/123824_0s.png)
JavaScript实现的鼠标跟随特效示例【2则实例】
![](https://img.aspxhome.com/file/2023/4/136524_0s.png)