vue中监听路由参数变化
今天遇到一个这样的业务场景:在同一个路由下,只改变路由后面的参数值,
比如在这个页面 /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中监听路由参数变化的更多相关文章
- vue中监听路由参数的变化
在vue项目中,假使我们在同一个路由下,只是改变路由后面的参数值,期望达到数据的更新. mounted: () =>{ this.id = this.$route.query.id; this. ...
- 在vue中监听storage的变化
1.首先在main.js中给Vue.protorype注册一个全局方法,其中,我们约定好了想要监听的sessionStorage的key值为’watchStorage’,然后创建一个StorageEv ...
- vue同一个路由,但参数发生变化,页面不刷新的问题(vue监听路由参数变化重新渲染页面)
watch: { $route: function(newVal, oldVal) { console.log(oldVal); //oldVa 上一次url console.log(newVal); ...
- vue mounted中监听div的变化
vue mounted中监听div的变化 <div style="width:200px;height:30px;background: #0e90d2" id=" ...
- angular的路由和监听路由的变化和用户超时的监听
先看两篇博客:http://camnpr.com/javascript/1652.html 这一篇博客是重点中的重点: http://www.tuicool.com ...
- 详解Vue 如何监听Array的变化
详解Vue 如何监听Array的变化:https://www.jb51.net/article/162584.htm
- vue中监听window.resize的变化
我只想说每个人遇到的bug真的不能一概而论,解决办法也会有不同.在vue中使用echarts的时候,会想要实现window.resize窗体变化大小的时候让图形大小跟着变化.实现的过程中各种bug,也 ...
- ionic 监听路由事件变化
(function(){ angular.module("cakeStore", ["ngRoute", "ionic","coo ...
- vue监听路由的变化,跳转到同一个页面时,Url改变但视图未重新加载问题
引入:https://q.cnblogs.com/q/88214/ 解决方法: 添加路由监听,路由改变时执行监听方法 methods:{ fetchData(){ console.log('路由发送变 ...
随机推荐
- 自考之SDT
软件开发工具(Soft Development Tools)是一本让程序猿了解自己自己所使用工具的书,作为一个刚刚接触编程的小菜鸟.计划工具.分析工具.设计工具.尽管用的都不是非常多,但也有一个概念了 ...
- C/C++获取本地时间常见方法
跨平台方法 方法一:手动暴力法 #include <iostream> using namespace std; #include <time.h> time_t t = ti ...
- hdu5288 OO’s Sequence 二分 多校联合第一场
OO's Sequence Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 131072/131072 K (Java/Others) ...
- webgoat7.1开发版环境搭建
环境准备:git mavenjdktomcat然后进入正文:下载webgoat门户cd ~/webgoatgit clone https://github.com/WebGoat/WebGoat.gi ...
- maven项目引入sqljdbc4 找不到包的完美 解决方案
今天碰到了这个问题,解决了,顺便做一下记录.首先来 重现 一下这个问题,maven install报错,说 找不到这个包,但是其实 我已经安装了. 我们 再来 看看 maven本地仓库里面有 什么,这 ...
- LuoguP4012 深海机器人问题(费用流)
题目描述 深海资源考察探险队的潜艇将到达深海的海底进行科学考察. 潜艇内有多个深海机器人.潜艇到达深海海底后,深海机器人将离开潜艇向预定目标移动. 深海机器人在移动中还必须沿途采集海底生物标本.沿途生 ...
- CMDB学习之二数据采集
首先也要调用插件的方式,来写采集数据插件,在src目录下创建一个插件 plugins ,然后在plugins下创建disk.py ,memory.py, network.py等等 src plugin ...
- 电商系统Broadleaf文档翻译(六) - 主要实体main entities
主要实体 原文标题:main entities 原文出处:http://www.broadleafcommerce.com/docs/core/current/broadleaf-concepts/d ...
- TimePickerDialog -下划线颜色修改
首先就是去framework下去找与之相关的theme属性 最开始的时候,直接找的是<item name="datePickerStyle">@style/Widget ...
- screen-Orientation 横竖屏设置
1.xml中设置,这个主要是在AndroidManifest.xml 中查找activity,然后在里面设置属性,如下 <application android:label="@str ...