今天遇到一个这样的业务场景:在同一个路由下,只改变路由后面的参数值,

比如在这个页面  /aaa?id=1 ,在这个页面中点击一个按钮后 跳转到 /aaa?id=2 ,

但从“/aaa?id=1”到“ /aaa?id=2”是不会触发vue的生命周期的,id变了,但页面数据不会更新,

想要更新只能重新加载页面(手动刷新),但是这多么low、孬呀,

作为一名追求极致用户体验的开发,怎么能容忍这种情况发生;

然后就想办法监听路由参数的变化呀,在watch监听$route和路由参数,代码如下:

watch: {
$route(){
this.userId= this.$route.query.id
},
userId() {
console.log("重新请求" + this.userId + "的数据")
}
},

OK了

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

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

    在vue项目中,假使我们在同一个路由下,只是改变路由后面的参数值,期望达到数据的更新. mounted: () =>{ this.id = this.$route.query.id; this. ...

  2. 在vue中监听storage的变化

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

  3. vue同一个路由,但参数发生变化,页面不刷新的问题(vue监听路由参数变化重新渲染页面)

    watch: { $route: function(newVal, oldVal) { console.log(oldVal); //oldVa 上一次url console.log(newVal); ...

  4. vue mounted中监听div的变化

    vue mounted中监听div的变化 <div style="width:200px;height:30px;background: #0e90d2" id=" ...

  5. angular的路由和监听路由的变化和用户超时的监听

    先看两篇博客:http://camnpr.com/javascript/1652.html 这一篇博客是重点中的重点:                   http://www.tuicool.com ...

  6. 详解Vue 如何监听Array的变化

    详解Vue 如何监听Array的变化:https://www.jb51.net/article/162584.htm

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

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

  8. ionic 监听路由事件变化

    (function(){ angular.module("cakeStore", ["ngRoute", "ionic","coo ...

  9. vue监听路由的变化,跳转到同一个页面时,Url改变但视图未重新加载问题

    引入:https://q.cnblogs.com/q/88214/ 解决方法: 添加路由监听,路由改变时执行监听方法 methods:{ fetchData(){ console.log('路由发送变 ...

随机推荐

  1. i2c tools 使用

    1.查询罗列出I2C的控制器总线数目 # i2cdetect -l i2c-0 i2c OMAP I2C adapter I2C adapter i2c-1 i2c OMAP I2C adapter ...

  2. 00075_BigInteger

    1.Java中long型为最大整数类型,对于超过long型的数据如何去表示呢.在Java的世界中,超过long型的整数已经不能被称为整数了,它们被封装成BigInteger对象.在BigInteger ...

  3. HOJ——T 2275 Number sequence

    http://acm.hit.edu.cn/hoj/problem/view?id=2275 Source : SCU Programming Contest 2006 Final   Time li ...

  4. 实验记录三 通用输入输出(GPIO)

    之前把全部程序都跑了一次后,得到了导师下一步的安排. 例如以下: 1.编写一个程序.实如今LCD上显示一个万年历,包含年月日 星期 还有室内的温度.2.编写一个程序,将原来的交通灯改为跑马灯. 期限是 ...

  5. android Manifest.xml选项

    结构 继承关系 public final class Manifest extends Object java.lang.Object android.Manifest 内部类 class  Mani ...

  6. es67

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

  7. 面向对象(OO)基础

    面向对象,英文Object-Oriented,简称OO),另外相关的还有:面向对象分析(Object-Oriented Analysis,OOA) 面向对象设计(Object-Oriented Des ...

  8. Vagrant 和 docker

    Docker应用实践 http://dockerone.com/article/146 Vagrant 适合用来管理虚拟机,而docker适合用来管理应用环境 http://www.linuxidc. ...

  9. Java-Spring-WebService最基础的配置示例

    很早很早之前,就初步学习了WebService,感觉还是比较"好"的.  使用Web服务,感觉就像普通API一样,和HTTP接口比较起来.  WebService有个很大的局限,就 ...

  10. Summary Day32

    1 . 文件管理 1.1 标C文件处理和UC文件处理函数的比較: 标C文件处理函数比UC的文件处理函数速度快.由于标C内部独立输入输出缓冲区, 会积累一定数量之后再写入文件,因此读写效率比較高 使用t ...