在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. 过滤器和监听器实现用户的在线登录人数,以及设置session时长。

    过滤器: package com.bjsxt.filter; import java.io.IOException; import javax.servlet.Filter; import javax ...

  2. Mybatis_多表关联查询_resultMap_集合对象_N+1方式实现

    mapper 层 提供 ClazzMapper 和 StudentMapper, ClazzMapper 查询所有班级信息, StudentMapper 根据班级编号查询学生信息. 在 ClazzMa ...

  3. 第6节:Java基础 - 三大集合(上)

    第6节:Java基础 - 三大集合(上) 本小节是Java基础篇章的第四小节,主要介绍Java中的常用集合知识点,涉及到的内容包括Java中的三大集合的引出,以及HashMap,Hashtable和C ...

  4. Codeforces-527c

    Leonid wants to become a glass carver (the person who creates beautiful artworks by cutting the glas ...

  5. 模拟摄像头解码模块最新测试 TVP5150模块 FPGA+SDRAM+TVP5150+VGA 实现PAL AV输入 VGA视频输出

    模拟摄像头解码模块最新测试  TVP5150模块  FPGA+SDRAM+TVP5150+VGA  实现PAL AV输入 VGA视频输出 测试使用电视机顶盒的AV模拟信号输入,VGA显示器输出测试,效 ...

  6. JS内置对象-Array之forEach()、map()、every()、some()、filter()的用法

    简述forEach().map().every().some()和filter()的用法 在文章开头,先问大家一个问题: 在Javascript中,如何处理数组中的每一项数据? 有人可能会说,这还不简 ...

  7. ubuntu远程桌面软件vnc。

    http://www.linuxidc.com/Linux/2017-03/141936.htm 现在Linux是非常火的  很多人喜欢用它,界面简单,操作容易,有很多图形化工具如WinSCP可以与U ...

  8. CCF-CSP题解 201903-4 消息传递接口

    求并行的各个进程,且进程内部顺序执行的情况下,会不会出现"死锁". 首先用\(%[^\n]\)将每个进程读入.最后过不了居然是因为\(str[\ ]\)开小了(悲喜交加.存储在\( ...

  9. GHOST CMS -上下文概述 Context Overview

    Context Overview上下文概述 Each page in a Ghost theme belongs to a context, which determines which templa ...

  10. Redis来啦~~

    一. 先聊点别的 1. sql & nosql sql指关系型数据库,如Oracle,MySQL等,nosql泛指非关系型数据库,如MongoDB,Redis等:SQL数据存在特定结构的表中, ...