vue监听路由变化时watch方法会执行多次的原因及解决

目录

• 需求描述：
• 需求解析：
• 解决需求
• 问题解决

本人前端菜鸟一名，一直致力于不间断的生产管理后台的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 = falseactivated () {
        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 = falseactivated () {
        this.activatedFlag = true    if (this.$route.params.orderId &
    &
 this.activatedFlag) {
      this.getList(this.$route.params.orderId)    }
}
deactivated () {
        this.activatedFlag = false;
}
    

大功告成，终于解决了。大佬们求轻吐槽代码，有更好的意见或建议，欢迎评论留言指导。

以上就是vue监听路由变化时watch方法会执行多次的原因及解决的详细内容，更多关于vue watch方法会执行多次的原因及解决的资料请关注其它相关文章！

• Vue中的 watch监听属性详情
• VUE watch监听器的基本使用方法详解
• 关于Vue不能监听(watch)数组变化的解决方法
• vue watch关于对象内的属性监听
• vue watch监听方法总结

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！