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 相关文章推荐
node.js中的fs.readFileSync方法使用说明
Dec 15 Javascript
JavaScript中 ES6 generator数据类型详解
Aug 11 Javascript
js print打印网页指定区域内容的简单实例
Nov 01 Javascript
Node.js开发教程之基于OnceIO框架实现文件上传和验证功能
Nov 30 Javascript
JavaScript实现自动跳转文本功能
May 25 Javascript
angular select 默认值设置方法
Jun 23 Javascript
关于JS与jQuery中的文档加载问题
Aug 22 jQuery
Koa2微信公众号开发之消息管理
May 16 Javascript
详解angular2如何手动点击特定元素上的点击事件
Oct 16 Javascript
使用express来代理服务的方法
Jun 21 Javascript
vue中通过使用$attrs实现组件之间的数据传递功能
Sep 01 Javascript
keep-alive保持组件状态的方法
Dec 02 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使用PDO访问oracle数据库的步骤详解
2017/09/29 PHP
使用按钮控制以何种方式打开新窗口的属性介绍
2012/12/17 Javascript
THREE.JS入门教程(3)着色器-下
2013/01/24 Javascript
JS获取IP、MAC和主机名的五种方法
2013/11/14 Javascript
Asp.Net alert弹出提示信息的几种方法总结
2014/01/29 Javascript
动态载入js提高网页打开速度的方法
2014/07/04 Javascript
基于jQuery创建鼠标悬停效果的方法
2015/03/07 Javascript
jQuery延迟加载图片插件Lazy Load使用指南
2015/03/25 Javascript
jQuery解决input超多的表单提交
2015/08/10 Javascript
jQuery版本升级踩坑大全
2016/01/12 Javascript
js+html5操作sqlite数据库的方法
2016/02/02 Javascript
基于Jquery插件实现跨域异步上传文件功能
2016/04/26 Javascript
下一代Bootstrap的5个特点 超酷炫!
2016/06/17 Javascript
jQuery ztree实现动态树形多选菜单
2016/08/12 Javascript
Jquery遍历select option和添加移除option的实现方法
2016/08/26 Javascript
最实用的jQuery分页插件
2016/10/09 Javascript
基于vue2.0+vuex的日期选择组件功能实现
2017/03/13 Javascript
jquery实现图片轮播器
2017/05/23 jQuery
原生js实现密码输入框值的显示隐藏
2017/07/17 Javascript
[原创]js实现保存文本框内容为本地文件兼容IE,chrome,火狐浏览器
2018/02/14 Javascript
关于ES6箭头函数中的this问题
2018/02/27 Javascript
详解Vue源码之数据的代理访问
2018/12/11 Javascript
JavaScript判断对象和数组的两种方法
2019/05/31 Javascript
如何优雅地在Node应用中进行错误异常处理
2019/11/25 Javascript
vue简单封装axios插件和接口的统一管理操作示例
2020/02/02 Javascript
python开发环境PyScripter中文乱码问题解决方案
2016/09/11 Python
对python numpy数组中冒号的使用方法详解
2018/04/17 Python
对Python w和w+权限的区别详解
2019/01/23 Python
基于python3监控服务器状态进行邮件报警
2019/10/19 Python
python实现FTP文件传输的方法(服务器端和客户端)
2020/03/20 Python
全球地下的服装和态度:Slam Jam
2018/02/04 全球购物
计算机科学与技术专业求职信
2014/09/03 职场文书
催款通知书范文
2015/04/17 职场文书
教师法制教育培训学习心得体会
2016/01/14 职场文书
Django给表单添加honeypot验证增加安全性
2021/05/06 Python
Python批量解压&压缩文件夹的示例代码
2022/04/04 Python