vue中监听路由参数的变化
在vue项目中,假使我们在同一个路由下,只是改变路由后面的参数值,期望达到数据的更新。
mounted: () =>{
this.id = this.$route.query.id;
this.getdetail()
}
getDetail()方法中会用到this.id这个参数,在同一页面切换id的值,并不会触发vue的声明周期函数。
可以添加路由监听:
watch: {
$route: {
handler() {
this.id = this.$route.query.id;
this.getDetail();
//深度监听,同时也可监听到param参数变化
},
deep: true,
}
}
vue中监听路由参数的变化的更多相关文章
- vue中监听路由参数变化
今天遇到一个这样的业务场景:在同一个路由下,只改变路由后面的参数值, 比如在这个页面 /aaa?id=1 ,在这个页面中点击一个按钮后 跳转到 /aaa?id=2 , 但从“/aaa?id=1”到“ ...
- vue中监听window.resize的变化
我只想说每个人遇到的bug真的不能一概而论,解决办法也会有不同.在vue中使用echarts的时候,会想要实现window.resize窗体变化大小的时候让图形大小跟着变化.实现的过程中各种bug,也 ...
- 在vue中监听storage的变化
1.首先在main.js中给Vue.protorype注册一个全局方法,其中,我们约定好了想要监听的sessionStorage的key值为’watchStorage’,然后创建一个StorageEv ...
- vue中监听数据变化 watch
今天做项目的时候,子组件中数据(原本固定的数据)需要父组件动态传入,如果一开始初始化用到的数据.但当时还没有获取到,初始化结束就不会更新数据了.只有监听这两个属性,再重新执行初始化. 1.watch是 ...
- vue中监听页面滚动和监听某元素滚动
①监听页面滚动 在生命周期mounted中进行监听滚动: mounted () { window.addEventListener('scroll', this.scrollToTop) }, 在方法 ...
- vue 中监听窗口发生变化,触发监听事件, window.onresize && window.addEventListener('resize',fn) ,window.onresize无效的处理方式
// 开始这样写,不执行 window.onresize = function() { console.log('窗口发生变化') } // 改成window监听事件 window.addEventL ...
- vue中监听返回键
问题:在项目中,我们常常有需求,当用户在填写表单时,点击返回的时候,我们希望加一个弹窗,确认离开吗,确认将保存为草稿 解决方案:利用 H5的 pushstate(个人理解为增加页面栈)特性与onpop ...
- 057——VUE中vue-router之路由参数默认值的设置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 056——VUE中vue-router之路由参数的验证处理保存路由安全
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- 用C在GBA上写光线追踪(0)配置开发编译环境
前段时间用C#写了一个光线追踪程序,可以渲染圆球,平面这种基本图形,反射,光照,阴影,都大致尝试做了一下. ↑ C#实现的光线追踪 ↑ GBA上C实现的光线追踪 然而,在我打算继续深入优化的时 ...
- 为什么QQ能帮你找到失散多年的兄弟?----图论
编程三分钟的第 44 篇原创文章 为什么qq里"可能认识的人"功能推荐的如此精准? 为什么两个没有什么联系的朋友会相互认识? 一切的背后到底是道德的沦丧,还是人性的扭曲 ? 让我们 ...
- luogu P1840 Color the Axis_NOI导刊2011提高(05)|并查集
题目描述 在一条数轴上有N个点,分别是1-N.一开始所有的点都被染成黑色.接着我们进行M次操作,第i次操作将[Li,Ri]这些点染成白色.请输出每个操作执行后剩余黑色点的个数. 输入格式 输入一行为N ...
- CF832D Misha, Grisha and Underground
有一棵n个节点的树,一共q 次询问 每次询问给定3个点,求两条起点终点在这三个点上且不完全重合的路径的最多公共节点数 简单LCA求距离,令a为汇合点,那么答案就是(dis(a,b) + dis(a,c ...
- mac本地如何搭建IPv6环境测试你的APP
转自:http://www.cocoachina.com/ios/20160525/16431.html 投稿文章,作者:请勺子喝杯咖啡(简书) IPv6的简介 IPv4 和 IPv6的区别就是 IP ...
- Objective-C面试题(精心整理的,附答案)
转自:http://www.mianwww.com/html/2014/03/20372.html 1.objective-c 是所有对象间的交互是如何实现的? 在对象间交互中每个对象承担的角色不同, ...
- go基础之基本数据结构(数组、slice、map)
go基本的数据结构有数组.slice.map,高级数据结构为结构体为用户自定义类型.本片文章主要讲解三大基本数据结构. 数组 slice Map 数组 数组是包含单个类型的元素序列,但是长度固定的数据 ...
- ACM小组的古怪象棋
Description ACM小组的Samsara和Staginner对中国象棋特别感兴趣,尤其对马(可能是因为这个棋子的走法比较多吧)的使用进行深入研究.今天他们又在 构思一个古怪的棋局:假如Sam ...
- require.context批量引入文件
require.context 是什么 require.context 是由webpack内部实现,require.context在构建时,webpack 在代码中进行解析. 当需要引入文件夹内多个文 ...
- 同时安装Office2016和Visio2016
最近由于学习需要使用Visio,于是下载来安装.之前使用的Office2016一切正常,但是怎么都安装不上visio,把Office2016卸载了安,又没有word.ppt这些,反正就是没法同时安装上 ...