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

 更新时间:2021年04月09日 10:43:14   作者:๘࿆꧁༺༼蜡笔小旧༽  
这篇文章主要介绍了vue监听路由变化时watch方法会执行多次的原因及解决,帮助大家更好的理解和学习使用vue框架,感兴趣的朋友可以了解下

本人前端菜鸟一名,一直致力于不间断的生产管理后台的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;
}

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

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

相关文章

  • vue项目在env文件中设置的变量无效问题及解决

    vue项目在env文件中设置的变量无效问题及解决

    这篇文章主要介绍了vue项目在env文件中设置的变量无效问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • vue项目移动端实现ip输入框问题

    vue项目移动端实现ip输入框问题

    这篇文章主要介绍了vue项目移动端实现ip输入框问题,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-03-03
  • 使用WebStorm用Debug模式调试Vue等前端项目的步骤

    使用WebStorm用Debug模式调试Vue等前端项目的步骤

    WebStorm提供了更简单的前端调试方法,记录一下WebStorm调试步骤启动前端项目,这篇文章主要介绍了使用WebStorm用Debug模式调试Vue等前端项目的步骤,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2024-11-11
  • 实例讲解Vue.js中router传参

    实例讲解Vue.js中router传参

    本篇文章通过实例给大家分析了Vue.js中router传参的相关知识点,对此有兴趣的朋友参考学习下。
    2018-04-04
  • vue项目使用modbus实现串口通讯的示例代码

    vue项目使用modbus实现串口通讯的示例代码

    本文主要介绍了vue项目使用modbus实现串口通讯的示例代码,可以实现与Modbus设备的数据交互,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2025-02-02
  • 怎样查看vue-cli的安装位置

    怎样查看vue-cli的安装位置

    这篇文章主要介绍了怎样查看vue-cli的安装位置问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • vue实现简单实时汇率计算功能

    vue实现简单实时汇率计算功能

    这篇文章主要为大家详细介绍了vue实现简单实时汇率计算功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-01-01
  • 详解Vue的数据及事件绑定和filter过滤器

    详解Vue的数据及事件绑定和filter过滤器

    这篇文章主要为大家介绍了Vue的数据及事件绑定和filter过滤器,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2022-01-01
  • vue头部导航动态点击处理方法

    vue头部导航动态点击处理方法

    这篇文章主要介绍了vue头部导航动态点击处理方法,文中通过一段示例代码给大家介绍了vue实现动态头部的方法,需要的朋友可以参考下
    2018-11-11
  • Vue项目中封装axios的方法

    Vue项目中封装axios的方法

    这篇文章主要介绍了Vue项目中封装axios的方法,axios 是一个轻量的 HTTP客户端,基于 XMLHttpRequest 服务来执行 HTTP 请求,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-05-05

最新评论