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 相关文章推荐
JavaScript 自动分号插入(JavaScript synat:auto semicolon insertion)
Nov 04 Javascript
用XMLDOM和ADODB.Stream实现base64编码解码实现代码
Nov 28 Javascript
jquery ready函数、css函数及text()使用示例
Sep 27 Javascript
js 通过cookie实现刷新不变化树形菜单
Oct 30 Javascript
JavaScript定义类和对象的方法
Nov 26 Javascript
JavaScript通过字符串调用函数的实现方法
Mar 18 Javascript
js脚本编写简单刷票投票系统
Jun 27 Javascript
浅谈Webpack自动化构建实践指南
Dec 18 Javascript
微信web端后退强制刷新功能的实现代码
Mar 04 Javascript
解决vue build打包之后首页白屏的问题
Mar 06 Javascript
jQuery-Citys省市区三级菜单联动插件使用详解
Jul 26 jQuery
vue中的mescroll搜索运用及各种填坑处理
Oct 30 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
一个分页的论坛
2006/10/09 PHP
php下判断数组中是否存在相同的值array_unique
2008/03/25 PHP
Windows PHP5和Apache的安装与配置
2009/06/08 PHP
PHP原生函数一定好吗?
2014/12/08 PHP
php字符串替换函数substr_replace()用法实例
2015/03/17 PHP
浅谈PHP的排列组合(如输入a,b,c 输出他们的全部组合)
2017/03/14 PHP
PHP从尾到头打印链表实例讲解
2018/09/27 PHP
js中函数声明与函数表达式
2015/06/03 Javascript
canvas 实现中国象棋
2017/02/17 Javascript
vue动态生成dom并且自动绑定事件
2017/04/19 Javascript
无限循环轮播图之运动框架(原生JS实现)
2017/10/01 Javascript
JS/HTML5游戏常用算法之碰撞检测 地图格子算法实例详解
2018/12/12 Javascript
mpvue微信小程序多列选择器用法之省份城市选择的实现
2019/03/07 Javascript
vue+elementUI实现表格关键字筛选高亮
2020/10/26 Javascript
简单了解微信小程序的目录结构
2019/07/01 Javascript
jQuery实现轮播图源码
2019/10/23 jQuery
python命令行解析之parse_known_args()函数和parse_args()使用区别介绍
2018/01/24 Python
python线程中同步锁详解
2018/04/27 Python
Python 删除整个文本中的空格,并实现按行显示
2018/07/24 Python
python tkinter窗口最大化的实现
2019/07/15 Python
python3实现从kafka获取数据,并解析为json格式,写入到mysql中
2019/12/23 Python
python如何更新包
2020/06/11 Python
详解Python的爬虫框架 Scrapy
2020/08/03 Python
详解Python中第三方库Faker
2020/09/25 Python
python3中确保枚举值代码分析
2020/12/02 Python
可持续未来的时尚基础:Alternative Apparel
2019/05/06 全球购物
Claire’s法国:时尚配饰、美容、珠宝、头发
2021/01/16 全球购物
关于毕业的广播稿
2014/01/10 职场文书
学生会主席事迹材料
2014/01/28 职场文书
报关专员求职信范文
2014/02/22 职场文书
总账会计岗位职责
2014/03/13 职场文书
旅游安全协议书
2014/04/21 职场文书
2015年维修工作总结
2015/04/25 职场文书
离婚纠纷代理词
2015/05/23 职场文书
python实现过滤敏感词
2021/05/08 Python
永中文档在线转换预览基于nginx配置部署方案
2022/06/10 Servers