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

比如在这个页面  /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. 自考之SDT

    软件开发工具(Soft Development Tools)是一本让程序猿了解自己自己所使用工具的书,作为一个刚刚接触编程的小菜鸟.计划工具.分析工具.设计工具.尽管用的都不是非常多,但也有一个概念了 ...

  2. C/C++获取本地时间常见方法

    跨平台方法 方法一:手动暴力法 #include <iostream> using namespace std; #include <time.h> time_t t = ti ...

  3. hdu5288 OO’s Sequence 二分 多校联合第一场

    OO's Sequence Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Others) ...

  4. webgoat7.1开发版环境搭建

    环境准备:git mavenjdktomcat然后进入正文:下载webgoat门户cd ~/webgoatgit clone https://github.com/WebGoat/WebGoat.gi ...

  5. maven项目引入sqljdbc4 找不到包的完美 解决方案

    今天碰到了这个问题,解决了,顺便做一下记录.首先来 重现 一下这个问题,maven install报错,说 找不到这个包,但是其实 我已经安装了. 我们 再来 看看 maven本地仓库里面有 什么,这 ...

  6. LuoguP4012 深海机器人问题(费用流)

    题目描述 深海资源考察探险队的潜艇将到达深海的海底进行科学考察. 潜艇内有多个深海机器人.潜艇到达深海海底后,深海机器人将离开潜艇向预定目标移动. 深海机器人在移动中还必须沿途采集海底生物标本.沿途生 ...

  7. CMDB学习之二数据采集

    首先也要调用插件的方式,来写采集数据插件,在src目录下创建一个插件 plugins ,然后在plugins下创建disk.py ,memory.py, network.py等等 src plugin ...

  8. 电商系统Broadleaf文档翻译(六) - 主要实体main entities

    主要实体 原文标题:main entities 原文出处:http://www.broadleafcommerce.com/docs/core/current/broadleaf-concepts/d ...

  9. TimePickerDialog -下划线颜色修改

    首先就是去framework下去找与之相关的theme属性 最开始的时候,直接找的是<item name="datePickerStyle">@style/Widget ...

  10. screen-Orientation 横竖屏设置

    1.xml中设置,这个主要是在AndroidManifest.xml 中查找activity,然后在里面设置属性,如下 <application android:label="@str ...