在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. 机器学习笔记(六) ---- 支持向量机(SVM)【华为云技术分享】

    版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/devcloud/article/detai ...

  2. OCR文字识别在计算机视觉的重要性、基本技术和最新进展

    [摘要] 主要是文字检测和文字识别作为计算机视觉一部分的重要性,基本知识,面临的挑战,以及部分最新的成果. 人类认识了解世界的信息中91%来自视觉,同样计算机视觉成为机器认知世界的基础,也是人工智能研 ...

  3. 设计模式GOF23(行为型模式)

    场景: – 公司里面,报销个单据需要经过流程: • 申请人填单申请,申请给经理 • 小于1000,经理审查. • 超过1000,交给总经理审批. • 总经理审批通过 – 公司里面,请假条的审批过程: ...

  4. HDU 6405 Make ZYB Happy(广义SAM)

    It's known to all that ZYB is godlike, so obviously he has a large number of titles, such as jskingj ...

  5. BZOJ 3112 [Zjoi2013]防守战线

    题解:单纯形:转化为对偶问题: 对于最大化 cx,满足约束 Ax<=b ,x>0 对偶问题为 最小化 bx,满足约束 ATx>=c ,x>0 (AT为A的转置) 这一题的内存真 ...

  6. webpack实践(一)- 先入个门

    一.前言   webpack是个啥呢?看官网的这段描述. webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)   在我以前做纯html.css. ...

  7. DRF源码系列分析

    DRF源码系列分析 DRF源码系列分析--版本 DRF源码系列分析--认证 DRF源码系列分析--权限 DRF源码系列分析--节流

  8. ELK 理论小知识

    ELK 是现阶段众多企业单位都在使用的一种日志分析系统,它能够方便的为我们收集你想要的日志并且展示出来 ELK是Elasticsearch.Logstash.Kibana的简称,这三者都是开源软件,通 ...

  9. 建议2:注意Javascript数据类型的特殊性---(1)防止浮点数溢出

    1.防止浮点数溢出 二级制的浮点数不能正确地处理十进制的小数,因此 0.1+0.2不等于0.3 num = 0.1+0.2; //0.30000000000000004 这是JavaScript中经常 ...

  10. shell概述与echo命令

    一.Shell概述 1.什么是shell? 由此可见shell是用户与系统进行交互的接口,通过执行各种命令来完成时间处理与调度. 2.shell分类 Shell类别 易学性 可移植性 编辑性 快捷性 ...