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('路由发送变 ...
随机推荐
- linux 配置全局jdk环境
1.在usr/local下新建software文件夹(mkdir software),将下载的jdk和tomcat放在此文件夹下 2.解压 tar -xzvf jdk-8u191-linux-x64. ...
- FragmentTransaction的commit和commitAllowingStateLoss的差别
1.什么是FragmentTransaction? 使用Fragment时.能够通过用户交互来运行一些动作.比方添加.移除.替换等. 全部这些改变构成一个集合,这个集合被叫做一个transaction ...
- Android引入library失败的可能原因
eclipse环境,引入library一直失败 谷歌到的原因是 Windows下 目标工程必须和引用工程在同一磁盘盘符下 然后我将要引入的library项目移动和现在项目同一磁盘下,引入成功 至于为什 ...
- Onvif开发之服务端成功对接Rtsp视频流篇
前面篇介绍onvif服务端的发现功能,继续在之前的代码基础上完成一个RTSP流的工作,也就是客户端通过ONVIF协议来预览设备端在这个之前必须确定几个简单的条件1 设备端能被发现2 设备端支持RTSP ...
- 全面了解Linux下Proc文件系统
全面了解Linux下Proc文件系统 Proc是一个虚拟文件系统,在Linux系统中它被挂载于/proc目录之上.Proc有多个功能 ,这其中包括用户可以通过它访问内核信息或用于排错,这其中一个非 ...
- telint---切换当前正在运行的Linux系统的运行等级
telint命令用于切换当前正在运行的Linux系统的运行等级 Send control commands to the init daemon. --help Show this help --no ...
- Highcharts使用的一些总结
Highcharts 是一个用纯 JavaScript 编写的一个图表库, 能够很简单便捷的在 Web 网站或是 Web 应用程序添加有交互性的图表,并且免费提供给个人学习.个人网站和非商业用途使用. ...
- Codeforces 129A-Cookies(暴力)
A. Cookies time limit per test 2 seconds memory limit per test 256 megabytes input standard input ou ...
- LAMP+YII框架配置中遇到的问题
以下列出了不同问题及答案: 1. 在yii框架中,改动数据库信息,主要有main.php和database.php两个文件. 2. 问题: watermark/2/text/aHR0cDovL2Jsb ...
- Leetcode47: Palindrome Linked List
Given a singly linked list, determine if it is a palindrome. 推断一个链表是不是回文的,一个比較简单的办法是把链表每一个结点的值存在vect ...