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

比如在这个页面  /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. 利用js 获取ip和地址

    1.引用第三方js<script src="http://pv.sohu.com/cityjson?ie=utf-8"></script> 2.     I ...

  2. 使用表单向action提交时出现 “Error setting expression 'button' with value……”

    原因是,form中的组件设置了name属性,struts2会通过OGNL在action中找相应的属性. 如 <form action="login"> <intp ...

  3. SQL char字段类型排序

    我是做的ACCESS时候需要对字段的值进行排序,字段格式是char类型的,但是存的值是数字.现在需要对该字段进行排序. 通过查找,找到以下两种方法,记录下来. 1. 你可以转换成int型再排序 sel ...

  4. 具体解释Hibernate中的二级缓存

    1.前言 这篇博客再前几篇博客的基础上来解说一下.Hibernate中的二级缓存.二级缓存是属于SessionFactory级别的缓存机制. 第一级别的缓存是Session级别的缓存,是属于事务范围的 ...

  5. 线段树 hdu3642 Get The Treasury

    不得不说,这是一题很经典的体积并.. 然而还是debug了2个多小时... 首先思路:按z的大小排序. 然后相当于扫描面一样,,从体积的最下方向上方扫描,遇到这个面 就将相应的两条线增加到set中,或 ...

  6. vue组件中 IS 用法

    //html <link rel="stylesheet" href="http://www.jq22.com/demo/animate-141106223642/ ...

  7. 洛谷 P2958 [USACO09OCT]木瓜的丛林Papaya Jungle

    P2958 [USACO09OCT]木瓜的丛林Papaya Jungle 题目描述 Bessie has wandered off the farm into the adjoining farmer ...

  8. HDU1050:Moving Tables

    pid=1050">Moving Tables Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 ...

  9. Hirens Boot DVD 15.2 功能恢复版 v1.1 -- 制作U盘启动盘

    Hirens Boot DVD 15.2 功能恢复版 v1.1 这个版本比 Hirens Boot DVD 15.2 功能要多,在正式版本中缺少的商业工具这个版本都包含了,所以这个应用程序被称为恢复版 ...

  10. mysql 表设计时的update_time自动更新

    11.3.5 Automatic Initialization and Updating for TIMESTAMP and DATETIME 原文地址:https://dev.mysql.com/d ...