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('路由发送变 ...
随机推荐
- this对象的理解
(回答一:) (1).js的this指向是不确定的,也就是说是可以动态改变的.call/apply 就是用于改变this指向的函数,这样设计可以让代码更加灵活,复用性更高 (2).this 一般情况下 ...
- 各消息队列对比,Kafka深度解析,众人推荐,精彩好文!
http://blog.csdn.net/allthesametome/article/details/47362451
- 菜鸟之路——Java并发(二)ThreadLocal
一.什么是ThreadLocal ThreadLocal,非常多地方叫做线程本地变量,也有些地方叫做线程本地存储.事实上意思几乎相同.非常多博客都这样说:ThreadLocal为解决多线程程序 ...
- 荣获CCF(中国计算机学会)高级会员代表资格
详细地址:http://www.ccf.org.cn/sites/ccf/xjhydb.jsp?contentId=2624287722908 650) this.width=650;" b ...
- linux 查找文件和文件夹与下载命令
查找命令: 查找根目录下查找文件夹名称叫dir的目录地址 find / -name dir -d 查找/var/www/目录下叫index.jsp的文件 find /var/www/ -name i ...
- chage---修改帐号和密码的有效期限
chage命令 chage命令是用来修改帐号和密码的有效期限. 语法 chage [选项] 用户名 选项 -m:密码可更改的最小天数.为零时代表任何时候都可以更改密码. -M:密码保持有效的最大天 ...
- 今日题解------uvalive 2689
今天学到了代码以外的东西,就是你在vj上挂了content ,然后你想更新它,你就要刷新一下,不然你提交的那题可能提交到别的地方. 好了回到重点,本题的题意是: #include<bits/st ...
- [置顶]
Docker学习总结(5)——超实用Docker入门学习教程
Docker是什么 Docker是一种容器技术,它可以将应用和环境等进行打包,形成一个独立的,类似于iOS的APP形式的"应用",这个应用可以直接被分发到任意一个支持Docker的 ...
- 74LS153 选择器 【数字电路】
74LS153 我用了八个不同频率的方波信号,用153当作信号选择器,控制环节的开关是4通道的选择器,00 01 10 11分别选择通道 0 1 2 3 以下是八选一的demo
- Java开发者最经常使用19个Linux命令
1.查找文件 find / -name filename.txt 依据名称查找/文件夹下的filename.txt文件. 2.查看一个程序是否执行 ps –ef|grep tomcat 查看全部有关t ...