在vue项目中,假使我们在同一个路由下,只是改变路由后面的参数值,期望达到数据的更新。

mounted: () =>{
this.id = this.$route.query.id;
this.getdetail()
}

getDetail()方法中会用到this.id这个参数,在同一页面切换id的值,并不会触发vue的声明周期函数。

可以添加路由监听:

watch: {
$route: {
handler() {
this.id = this.$route.query.id;
this.getDetail();
//深度监听,同时也可监听到param参数变化
},
deep: true,
}
}

vue中监听路由参数的变化的更多相关文章

  1. vue中监听路由参数变化

    今天遇到一个这样的业务场景:在同一个路由下,只改变路由后面的参数值, 比如在这个页面  /aaa?id=1 ,在这个页面中点击一个按钮后 跳转到 /aaa?id=2 , 但从“/aaa?id=1”到“ ...

  2. vue中监听window.resize的变化

    我只想说每个人遇到的bug真的不能一概而论,解决办法也会有不同.在vue中使用echarts的时候,会想要实现window.resize窗体变化大小的时候让图形大小跟着变化.实现的过程中各种bug,也 ...

  3. 在vue中监听storage的变化

    1.首先在main.js中给Vue.protorype注册一个全局方法,其中,我们约定好了想要监听的sessionStorage的key值为’watchStorage’,然后创建一个StorageEv ...

  4. vue中监听数据变化 watch

    今天做项目的时候,子组件中数据(原本固定的数据)需要父组件动态传入,如果一开始初始化用到的数据.但当时还没有获取到,初始化结束就不会更新数据了.只有监听这两个属性,再重新执行初始化. 1.watch是 ...

  5. vue中监听页面滚动和监听某元素滚动

    ①监听页面滚动 在生命周期mounted中进行监听滚动: mounted () { window.addEventListener('scroll', this.scrollToTop) }, 在方法 ...

  6. vue 中监听窗口发生变化,触发监听事件, window.onresize && window.addEventListener('resize',fn) ,window.onresize无效的处理方式

    // 开始这样写,不执行 window.onresize = function() { console.log('窗口发生变化') } // 改成window监听事件 window.addEventL ...

  7. vue中监听返回键

    问题:在项目中,我们常常有需求,当用户在填写表单时,点击返回的时候,我们希望加一个弹窗,确认离开吗,确认将保存为草稿 解决方案:利用 H5的 pushstate(个人理解为增加页面栈)特性与onpop ...

  8. 057——VUE中vue-router之路由参数默认值的设置

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 056——VUE中vue-router之路由参数的验证处理保存路由安全

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. Python协程与Go协程的区别二

    写在前面 世界是复杂的,每一种思想都是为了解决某些现实问题而简化成的模型,想解决就得先面对,面对就需要选择角度,角度决定了模型的质量, 喜欢此UP主汤质看本质的哲学科普,其中简洁又不失细节的介绍了人类 ...

  2. Plugin execution not covered by lifecycle configuration: org.codehaus.mojo:build-helper-maven-plugin:1.8:add-test-source (execution: add-functional-source, phase: generate-sources)

    在maven项目中使用add-source时,pom.xml报如下错误: Plugin execution not covered by lifecycle configuration: org.co ...

  3. [TimLinux] Python3 Coverity zeep/SOAP 库使用示例

    废话不多说,上代码: # 基于Coverity的示例 from zeep import Client from zeep.wsse.username import UsernameToken conf ...

  4. Remember the Word (UVA-1402)

    Neal is very curious about combinatorial problems, and now here comes a problem about words. Knowing ...

  5. 2018HDU多校训练-3-Problem D. Euler Function

    链接:http://acm.hdu.edu.cn/showproblem.php?pid=6322 Problem Description In number theory, Euler's toti ...

  6. CC1605&CC1604 usb3.0+FPGA 高速视频采集 双目相机测评

    CC1605&CC1604 usb3.0+FPGA 高速视频采集 双目相机测评 摄像头配置:ov5640.OV5642.mt9p031.mt9m001c12stm OV5640 xclk:24 ...

  7. kubernetes-单机实验(入门)

    一.安装kubernetes   实验环境: centos7.0(建议使用7.5版本) 实验机器IP:192.168.1.4 安装方式:yum安装 需求环境:Tomcat+Mysql   1:关闭防火 ...

  8. SQL中Group By和having的用法

    转自 ITGirl笑笑   一.GROUP BY GROUP BY语句用来与聚合函数(aggregate functions such as COUNT, SUM, AVG, MIN, or MAX. ...

  9. 使用python实现数组、链表、队列、栈

    引言 什么是数据结构? 数据结构是指相互之间存在着一种或多种关系的数据元素的集合和该集合中数据元素之间的关系组成. 简单来说,数据结构就是设计数据以何种方式组织并存储在计算机中. 比如:列表,集合和字 ...

  10. hdu 6308 Time Zone (模拟+字符串处理)

    Time Zone Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total S ...