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

比如在这个页面  /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. 手把手教你用vue-cli构建一个简单的路由应用

    上一章说道:十分钟上手-搭建vue开发环境(新手教程)https://www.jianshu.com/p/0c6678671635 开发环境搭建好之后,那么开始新添加一些页面,构建最基本的vue项目, ...

  2. SpringBoot 增加 拦截器 判断是否登录

    1.创建拦截器 package com.example.demo.interceptor; import org.slf4j.Logger; import org.slf4j.LoggerFactor ...

  3. 【Uva 1627】Team them up!

    [Link]: [Description] 给你n个人; 有一些人之间有认识关系 a认识b,b不一定认识a 让你把这n个人分成两组 使得这两组中的每一组: 组内的人与人之间都相互认识. 并且,使得两组 ...

  4. Hello World (记事本+命令行)

    读完这篇博客.你将对下面几点更有心得: - Java 中的当前路径.类路径等概念 - javac.java 命令的综合使用 - jar 包的创建及引用 创建文件夹准备測试源代码 打包外部依赖 Jar ...

  5. leetCode 27.Remove Element (删除元素) 解题思路和方法

    Remove Element Given an array and a value, remove all instances of that value in place and return th ...

  6. CesiumJS - 3D Tiles BIM

    CesiumJS - 3D Tiles BIM eryar@163.com 1. Introduction CesiumJS is an open-source JavaScript library ...

  7. html ---- a 标签 在新窗口打开的问题

  8. javafx checkbox

    public class EffectTest extends Application { public static void main(String[] args) { launch(args); ...

  9. C#开发 —— 泛型,文件

    泛型的目标是采用广泛适用和可交互性的形式来表示算法和数据结构 —— 参数化 泛型能子啊编译时提供强大的类型检查,减少数据类型之间的显式转换,装箱操作和运行时的类型检查 泛型的类型参数T可以被看作是一个 ...

  10. Gym - 100548C The Problem Needs 3D Arrays

    Problem C.   The Problem Needs 3D Arrays Time Limit: 6000MS Memory Limit: 262144KB 64bit IO Format: ...