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

比如在这个页面  /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. Windows Server 2016 主域控制器搭建

    基本上微软产品都需要依附于域控制器做身份认证,接下来我们一起来对Windows Server 2016 进行AD活动目录功能添加.1.更改服务器IP地址2.修改计算机名称(重新启动计算机)3.打开服务 ...

  2. 【HDU】5249-KPI(线段树+离散化)

    好久没写线段树都不知道怎么写了... 很easy的线段树二分问题 #include<cstdio> #include<set> #include<queue> #i ...

  3. 39.Node.js域名解析---DNS模块

    转自:http://www.runoob.com/nodejs/nodejs-module-system.html Node.js DNS 模块用于解析域名.引入 DNS 模块语法格式如下: var ...

  4. 网页中插入javascript的几种方法

    网页中插入javascript的方法常见的有两种: 一.直接使用html标记 JavaScript 可以出现在 html的任意地方.使用标记<script>…</script> ...

  5. ElasticSearch 架构图

    ElasticSearch 架构图 从下往上来分析ElasticSearch 架构图 Gateway代表ElasticSearch索引的持久化存储方式. 在Gateway中,ElasticSearch ...

  6. C++的继承和Java继承的比较

    在C++中继承可分为公有继承(public)保护继承(protected)和私有继承(private),而在Java中默认只有一种继承(相当于C++中的公有继承)下面我们来看一段代码 #include ...

  7. python的循环测试

    这段代码要实现的是:猜数字58 ,猜三次,三个判断条件和一个结束条件.判断为等于58的时候跳出循环. 首先定义一个固定变量 int 函数是更改input输入的文字类型 if guess_age == ...

  8. GetInvocationList 委托链表

    最近发现C#程序初始化时在构造函数中,偶尔出现事件注册不成功.后查资料发现有GetInvocationList 这么一个获取类中的委托链表的函数, 使用方法如下: 1.在需委托的类(Class1)中增 ...

  9. HDU——T 4738 Caocao's Bridges

    http://acm.hdu.edu.cn/showproblem.php?pid=4738 Time Limit: 2000/1000 MS (Java/Others)    Memory Limi ...

  10. CODEVS——T1183 泥泞的道路

    时间限制: 1 s  空间限制: 128000 KB 题目等级 : 钻石 Diamond 题解  查看运行结果 题目描述 Description CS有n个小区,并且任意小区之间都有两条单向道路(a到 ...