个人中心
文章发布
退出
作者热门文章
- ubuntu12.04环境下使用kvm ioctl接口实现最简单的虚拟机
- Ubuntu 通过无线网络安装Ubuntu Server启动系统后连接无线网络的方法
- 在Ubuntu上搭建网桥的方法
- ubuntu 虚拟机上网方式及相关配置详解
32
4
CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.
这篇CFSDN的博客文章vue监听路由变化时watch方法会执行多次的原因及解决由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.
本人前端菜鸟一名，一直致力于不间断的生产管理后台的bug，并以此自勉自励。近几天接到一个需求，网上也搜了很多例子，但是没有从根本上解决。在这里记录一下我自己的解决的过程，这也是第一次在掘金发言，求轻虐.
有A、B两个页面，需要将A页面的orderId用路由传参的方式传入到B页面执行数据关联查询，然后显示在B页面 。
如果是你，你拿到这个需求，应该很容易想到在B页面对路由变化做watch，然后获取参数执行查询数据的方法完事.
A页面中:
|
1
2
3
4
5
6
7
8
|
const route = {
name:
'BpageName'
,
params: { orderId:
this
.tableData[index].id },
meta: {
title:
'B页面'
}
}
this
.$router.push(route)
|
push一个路由重新打开B页面 。
然后B页面中接受路由传参:
|
1
2
3
4
5
6
|
@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页面 。
|
1
2
3
|
if
(
this
.$route.fullPath ===
'A页面路由路径'
) {
// do something
}
|
怀着激动的心情去试了试 。
|
1
2
3
4
5
6
|
@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().
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
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就去获取数据.
|
1
2
3
4
5
6
7
8
9
10
11
|
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
;
}
|
大功告成，终于解决了。大佬们求轻吐槽代码，有更好的意见或建议，欢迎评论留言指导.
以上就是vue监听路由变化时watch方法会执行多次的原因及解决的详细内容，更多关于vue watch方法会执行多次的原因及解决的资料请关注我其它相关文章！ 。
原文链接：https://juejin.cn/post/6948684670225940487 。
最后此篇关于vue监听路由变化时watch方法会执行多次的原因及解决的文章就讲到这里了,如果你想了解更多关于vue监听路由变化时watch方法会执行多次的原因及解决的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。
32
4
0
我遇到了一个奇怪的问题，我以前从未真正体验过这个，这是服务器的代码(在这种情况下客户端是 firefox)，我创建它的方式: _Socket = new Socket( AddressFamily.I
我正在使用 C 编程语言在 Ubuntu 中开发原始套接字程序。由于我使用原始套接字，因此需要使用 SOCK_RAW 类型而不是 SOCK_STREAM。使用 SOCK_RAW 反过来会通过抛出 来禁
我实际上在客户端-客户端应用程序方面遇到了麻烦。这个问题中的一切都与Unix网络编程环境有关。 这是我的情况: 我有一个客户端(从现在起称为 C1)，它调用 listen()在套接字上。 C1 输入
是否可以监听 QTcpSocket？我在 Tcp 上有一个简单的 p2p 连接。但是我找不到在随机自由端口上启动 QTcpSocket 的方法。我应该为此使用 QTcpServer，还是仅对 1 个连
我正在尝试根据 this documentation 监听码头更改事件和 ACTION_DOCK_EVENT . 我的接收器从未被击中。 我的代码看起来很简单，所以我想知道监听停靠事件是否需要权限？我
在 Linux 3.9 内核和更高版本中运行，我有一个应用程序 X，它在特定套接字上监听连接。我想写一个不相关的应用程序 Y，它跟踪尝试连接到此套接字的次数、源 IP 等。 是否可以在 c++ 中(最
是否可以监听日志条目？即是否存在用于附加日志条目的广播 Intent ？ 最佳答案 没有 Intent 。 使用下面的代码: try { Process mLogcatProc
我已经实现了 installTap 方法，它为我提供了音频缓冲区浮点示例。我已经通过我的 C++ DSP 库过滤了它们。我想将此缓冲区“发送”到耳机/扬声器。我从示例中再次执行了 AVAudioPCM
我正在尝试启动一个在后台运行的服务，该服务正在监听 ACTION_SCREEN_OFF，当它找到 ACTION_SCREEN_OFF 时，启动我的 Activity 。 我在某处读到您需要创建一个Br
我正在开发一个 HOC，以帮助处理我的 React 应用程序中的表单(用于练习)。 // components/Wrapper.js import React from 'react'; export
我有“服务器端”mqtt 客户端，用于监视和管理远程 mqtt 客户端。我想扩展此服务器模块以密切关注远程客户端的连接。 在正常操作期间，远程客户端定期 PING 代理，根据代理日志: 1532924
我正在编写一个检查电池容量的守护进程。这是用于运行 Linux 的太阳能嵌入式设备。我读过使用 sleep() 是个坏主意在守护进程中，因此我正在尝试使用事件。所以我写了一些 PoC，但我没有收到任何
是否有一个库或技术来监听 Swing ui 对象上的所有可变事件？具体数据。 例如，我有一个带有 JTextArea、JCheckBox、JComboBox 等的 JPanel。有没有一种通用的方法可
使用 KineticJS，是否可以仅绑定(bind)函数一次？就像 jQuery 的等价物一样......例如。在 jQuery 中 // bad $('.wrap a').on('click', m
我正在使用 jquery 制作一个非常简单的富文本编辑器...我不想使用第三方的。 我需要监听 iframe(同一域等)内的事件，从输入开始。显然我需要经常使用bind()。 这就是我目前所拥有的，它
我有一个函数可以获取 XML 文档并根据 XSL 文档对其进行转换。然后，它将结果放入 id 为 laneconfigdisplay 的 div 中。我想要做的是，与转换逻辑分开，为该 div 设置一
如何检测 NSTextView 中的一行(即“\n”字符)被删除？我可以使用 textView:doCommandBySelector: 轻松监听新行并监听 "insertNewLine:"。 (参见
我有以下代码订阅 VisiblePosition 的属性更改事件Column 的属性(property)类(class): DependencyPropertyDescriptor dpd = Dep
我正在尝试在本地主机上收听浏览器的 DNS 请求。 我写了这段代码: WSADATA wsaData; unsigned char hostname[100]; int sockfd; struct
如何以 JSON 对象的形式接收对我网站上特定页面的回调？这些回调是从第三方 API 发出的，用于报告我与该 API 的通信状态。 我想过使用node.js的http.server.listen，但我
我是一名优秀的程序员,十分优秀！