vue中监听路由参数的变化及方法


Posted in Javascript onDecember 06, 2019

在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,
  }
 }

ps:下面看下vue中监听路由参数变化的方法

在vue项目中,假使我们在同一个路由下,只是改变路由后面的参数值,如果不监听路由参数值的变化,页面无数据刷新,需手动刷新浏览器,这样做就不是我们的预期效果。

举例:当前路由为  /pjthome?pjtid=123456

mounted: function () {
   this.pjtid = this.$route.query.pjtid
   this.pjtdetail()
},

在页面pjtdetail()方法中,需要用到pjtid这个参数,假如在同一页面有相似项目切换,只是pjtid发生变化,在切换时,并未重新加载数据,原因是跟vue的生命周期有关,具体该解决这个问题,添加路由监听即可。

exp:

watch: {
   $route(){
    this.pjtid = this.$route.query.pjtid
   },
   pjtid() {
    this.pjtdetail()
   },
}

解决。

总结

以上所述是小编给大家介绍的vue中监听路由参数的变化及方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
jQuery学习2 选择器的使用说明
Feb 07 Javascript
原生js实现shift/ctrl/alt按键的获取
Apr 08 Javascript
jquery显示隐藏input对象
Jul 21 Javascript
[原创]javascript typeof id==='string'?document.getElementById(id):id解释
Nov 02 Javascript
通过修改360抢票的刷新频率和突破8车次限制实现方法
Jan 04 Javascript
AngularJS中的按需加载ocLazyLoad示例
Jan 11 Javascript
纯JavaScript实现实时反馈系统时间
Oct 26 Javascript
微信小程序仿美团城市选择
Jun 06 Javascript
vue实现计步器功能
Nov 01 Javascript
JS数组方法reverse()用法实例分析
Jan 18 Javascript
javascript 内存模型实例详解
Apr 18 Javascript
google广告之另类js调用实现代码
Aug 22 Javascript
详解ECMAScript2019/ES10新属性
Dec 06 #Javascript
ES6的异步操作之promise用法和async函数的具体使用
Dec 06 #Javascript
原生JavaScript实现滑动拖动验证的示例代码
Dec 06 #Javascript
微信小程序 自定义弹窗实现过程(附代码)
Dec 05 #Javascript
Nuxt v-bind绑定img src不显示的解决
Dec 05 #Javascript
微信小程序swiper左右扩展各显示一半代码实例
Dec 05 #Javascript
微信小程序顶部导航栏可滑动并选中放大
Dec 05 #Javascript
You might like
php 将bmp图片转为jpg等其他任意格式的图片
2009/06/29 PHP
php 一元分词算法
2009/11/30 PHP
PHP微框架Dispatch简介
2014/06/12 PHP
php学习笔记之基础知识
2014/11/08 PHP
用prototype实现的简单小巧的多级联动菜单
2007/03/24 Javascript
用javascript控制iframe滚动的代码
2007/04/10 Javascript
跨域表单提交状态的变相判断代码
2009/11/12 Javascript
JavaScript学习笔记(十七)js 优化
2010/02/04 Javascript
jquery ajax中使用jsonp的限制解决方法
2013/11/22 Javascript
Iframe 自动适应页面的高度示例代码
2014/02/26 Javascript
Javascript中的Prototype到底是什么
2016/02/16 Javascript
JS使用onerror捕获异常示例
2016/08/03 Javascript
Bootstrap Table的使用总结
2016/10/08 Javascript
D3.js封装文本实现自动换行和旋转平移等功能
2016/10/14 Javascript
用Vue-cli搭建的项目中引入css报错的原因分析
2017/07/20 Javascript
几个你不知道的技巧助你写出更优雅的vue.js代码
2018/06/11 Javascript
JavaScript简单实现关键字文本搜索高亮显示功能示例
2018/07/25 Javascript
vue-cli4使用全局less文件中的变量配置操作
2020/10/21 Javascript
python 实现自动远程登陆scp文件实例代码
2017/03/13 Python
python3.6使用pymysql连接Mysql数据库
2018/05/25 Python
Python 使用folium绘制leaflet地图的实现方法
2019/07/05 Python
基于python图书馆管理系统设计实例详解
2020/08/05 Python
德国最大的拼图在线商店:Puzzle.de
2016/12/17 全球购物
电气工程和自动化自荐信范文
2013/12/25 职场文书
员工拾金不昧表扬信
2014/01/09 职场文书
晚会邀请函范文
2014/01/24 职场文书
警示教育活动总结
2014/05/05 职场文书
关于学习的演讲稿
2014/05/10 职场文书
航空学院求职信
2014/06/11 职场文书
医院护士见习期自我鉴定
2014/09/15 职场文书
森马旗舰店双十一营销方案
2014/09/29 职场文书
2014年安全员工作总结
2014/11/13 职场文书
2014年银行个人工作总结
2014/12/05 职场文书
党支部考察鉴定意见
2015/06/02 职场文书
余世维讲座观后感
2015/06/11 职场文书
在CSS中映射鼠标位置并实现通过鼠标移动控制页面元素效果(实例代码)
2021/04/22 HTML / CSS