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

比如在这个页面  /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. snmpd修改端口

    http://blog.csdn.net/cau99/article/details/5077239 http://blog.csdn.net/gua___gua/article/details/48 ...

  2. cogs 50. [NOIP2002] 选数

    50. [NOIP2002] 选数 ★   输入文件:choose.in   输出文件:choose.out   简单对比时间限制:1 s   内存限制:128 MB [问题描述]: 已知 n 个整数 ...

  3. STL heap部分源代码分析

    本文假设你已对堆排序的算法有主要的了解. 要分析stl中heap的源代码的独到之处.最好的办法就是拿普通的代码进行比較.话不多说,先看一段普通的堆排序的代码: //调整大顶堆.使得结构合理 void ...

  4. USACO milk

    /* ID:kevin_s1 PROG:milk LANG:C++ */ #include <iostream> #include <string> #include < ...

  5. JAVA基础实例(二)

    1.做一个饲养员给动物喂食物的样例体现JAVA中的面向对象思想,接口(抽象类)的用处 package com.softeem.demo; /** *@authorleno *动物的接口 */ inte ...

  6. android中9-patch图片的使用

    看了非常多文章的介绍,9.png图片有两种区域:可扩展区和内容显示区. 弄了半天才明确什么叫做可扩展区,什么叫做内容显示区. 分享一下自己的理解. 下图是某博客的截图: 图片来自:http://blo ...

  7. jquery09--Callbacks : 回调对象

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  8. ajax的内容

    ajax是什么? 通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新,可以局部刷新而不必整个页面整体刷新. url的简单认识: 进入服务器的三种方式: 1.localhost:端口号 ...

  9. Knockout 重新绑定注意要点

    function ReImport(id) { //点击按钮时调用函数名称, var node = document.getElementById('bindingNode'); //bindingN ...

  10. ubuntu-date命令的使用

    date命令是关于时间的命令.它可以用来查看.更改系统时间 它的基本格式为 date "+ %H" 注意 "+"是不可以省略的.结果如下 zhangshuli@ ...