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

比如在这个页面  /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. 使用UltraEdit配置多行注释和取消多行注释

    UltraEdit功能强大,使用方便,成为软件开发者必备的文档和代码编辑工具.有很多人也直接用它来写代码,如C/Java,脚本如:Perl/Tcl/JavaScript 等. 如果用来写代码,有一个不 ...

  2. 使用python创建cocos2d-x项目

    已准备条件: 已安装vs2012,已下载cocos2d-x sdk 2.2.3包. 旧版本号使用包里面的模板创建项目,如今新的包,使用python  来创建 1.下载安装  python  https ...

  3. Swift之 vm10虚拟机安装Mac OS X10.10教程

    VM10装Mac OS X 10.9.3及更新到Mac OS X 10.10,让你的windows也能玩Swift .   近期WWDC放出终极大招--新的编程语言Swift(雨燕),导致一大波程序猿 ...

  4. Docs-->.NET-->API reference-->System.​Web.​UI-->Control-->Methods-->Find​Control

    https://docs.microsoft.com/en-us/dotnet/api/system.web.ui.control.findcontrol?view=netframework-4.7 ...

  5. Vue v-bind的使用

    1.src <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <tit ...

  6. SKU=Stock Keeping Unit(库存量单位)。即库存进出计量的单位,可以是以件,盒,托盘等为单位

    SKU=Stock Keeping Unit(库存量单位).即库存进出计量的单位,可以是以件,盒,托盘等为单位.SKU这是对于大型连锁超市DC(配送中心)物流管理的一个必要的方法.现在已经被引申为产品 ...

  7. Snapshot Standby

    INTRODUCTION Snapshot standby database是ORACLE 11g的新特性.允许Physical standby短时间的使用read write模式. Snapshot ...

  8. 【Django】信号调度

    Django中提供了"信号调度",用于在框架执行操作时解耦. 通俗来讲,就是在某些动作发生时,信号允许特定的发送者去提醒一些接受者. * Django内置信号:** Model s ...

  9. KnockOut下的离开检测

    <input type="text" class="form-control" data-bind="event:{ blur:$root.ch ...

  10. HTML中行内元素与块级元素有哪些及区别

    二.行内元素与块级元素有什么不同? 块级元素和行内元素的区别是,块级元素会占一行显示,而行内元素可以在一行并排显示. 通过样式控制,它们可以相互转换. 1.尺寸-块级元素和行内元素之间的一个重要的不同 ...