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 DOM 学习第七章 表单的扩展
Feb 19 Javascript
尝试在让script的type属性等于text/html
Jan 15 Javascript
javascript重写alert方法的实例代码
Mar 29 Javascript
JavaScript数值转换的三种方式总结
Jul 31 Javascript
jQuery事件用法实例汇总
Aug 29 Javascript
javascript数据类型验证方法
Dec 31 Javascript
Vue.js表单控件实践
Oct 27 Javascript
es6 字符串String的扩展(实例讲解)
Aug 03 Javascript
用js实现before和after伪类的样式修改的示例代码
Sep 07 Javascript
angularjs实现简单的购物车功能
Sep 21 Javascript
微信小程序本地存储实现每日签到、连续签到功能
Oct 09 Javascript
在Vue中使用mockjs代码实例
Nov 25 Vue.js
详解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乱码问题
2012/03/25 PHP
PHP 第一节 php简介
2012/04/28 PHP
PHP CodeIgniter框架的工作原理研究
2015/03/30 PHP
php递归遍历删除文件的方法
2015/04/17 PHP
PHP实现连接设备、通讯和发送命令的方法
2015/10/13 PHP
yii2 modal弹窗之ActiveForm ajax表单异步验证
2016/06/13 PHP
PHP5.0 TIDY_PARSE_FILE缓冲区溢出漏洞的解决方案
2018/10/14 PHP
thinkphp5框架实现的自定义扩展类操作示例
2019/05/16 PHP
JavaScript中的细节分析
2012/06/30 Javascript
使用js实现雪花飘落效果
2013/08/26 Javascript
5个数组Array方法: indexOf、filter、forEach、map、reduce使用实例
2015/01/29 Javascript
Node.js通过身份证号验证年龄、出生日期与性别方法示例
2017/03/09 Javascript
Angularjs根据json文件动态生成路由状态的实现方法
2017/04/17 Javascript
谈谈VUE种methods watch和compute的区别和联系
2017/08/01 Javascript
clipboard.js在移动端复制失败的解决方法
2018/06/13 Javascript
JS实现横向跑马灯效果代码
2020/04/20 Javascript
python 正则表达式 概述及常用字符
2009/05/04 Python
Python struct模块解析
2014/06/12 Python
你真的了解Python的random模块吗?
2017/12/12 Python
python多行字符串拼接使用小括号的方法
2020/03/19 Python
python3.6实现学生信息管理系统
2019/02/21 Python
Django Rest framework频率原理与限制
2019/07/26 Python
基于python实现把图片转换成素描
2019/11/13 Python
jupyter notebook快速入门及使用详解
2020/11/13 Python
python二维图制作的实例代码
2020/12/03 Python
html5中嵌入视频自动播放的问题解决
2020/05/25 HTML / CSS
创意爱尔兰礼物:Creative Irish Gifts
2020/01/29 全球购物
M.M.LaFleur官网:美国职业女装品牌
2020/10/27 全球购物
JAVA中运算符的分类及举例
2015/09/12 面试题
团日活动策划书
2014/02/01 职场文书
生产部岗位职责范文
2014/02/07 职场文书
《鞋匠的儿子》教学反思
2014/03/02 职场文书
酒店采购员岗位职责
2014/03/14 职场文书
《沙漠中的绿洲》教学反思
2014/04/24 职场文书
使用 Apache 反向代理的设置技巧
2022/01/18 Servers
Win10服务全部禁用了怎么启动?Win10服务全部禁用解决方法
2022/09/23 数码科技