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('路由发送变 ...
随机推荐
- 【Henu ACM Round #13 D】A Trivial Problem
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 123...n中末尾0的个数 只会由素因子2和5的个数决定且等于 Min{cnt[2],cnt[5]} 且素因子2的个数一定会比5多 ...
- 【2017 Multi-University Training Contest - Team 1 1001】Add More Zero
[Link]: [Description] 让你求最大的k; 使得 10^k<=2^m-1 [Solution] 求出2^m-1的位数就好; [lg(2^m-1)] = lg(2^m) = m* ...
- AVEVA PDMS Text Tool
AVEVA PDMS Text Tool eryar@163.com 网上有个文字工具插件,可以在PDMS中创建三维的字母.数字,不过不能创建中文.所以开发一个小工具,可以在PDMS中创建任意文字,如 ...
- Android简单实现Socket通信,client连接server后,server向client发送文字数据
案例实现的是简单的Socket通信,当client(Androidclient)连接到指定server以后,server向client发送一句话文字信息(你能够拓展其他的了) 先看一下服务端程序的实现 ...
- mongodb与SQL相应关系表
1. select查询 mongodb使用find或者findOne来查询: find批量查询. findOne是查询一条记录. find有两个參数: 第一个查询条件, 第二个查询返回的字段. 以下是 ...
- 如何使用定时器settimeout、setInterval执行能传递参数的函数(转)
来自: http://www.cnblogs.com/wkylin/archive/2012/09/07/2674911.html var userName="jack";//根据 ...
- double 失真例子
public static void main(String[] args) { // TODO Auto-generated method stub double ab=821.20; dou ...
- 【Hello 2018 C】Party Lemonade
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 处理出凑够2^j最少需要花费多少钱. 即试着把第i种物品买2^(j-i)个,看看会不会更便宜 记录在huafei[0..31]中 然 ...
- 平衡树之RB-tree
#include <memory> template<class T> struct rb_node { T key; bool color;//true red | fals ...
- Hive通过查询语句向表中插入数据过程中发现的坑
前言 近期在学习使用Hive(版本号0.13.1)的过程中,发现了一些坑,它们也许是Hive提倡的比关系数据库更加自由的体现(同一时候引来一些问题).也许是一些bug.总而言之,这些都须要使用Hive ...