浅析vue-router jquery和params传参(接收参数)$router $route的区别


Posted in jQuery onAugust 03, 2018

今天做项目时踩到了vue-router传参的坑(jquery和params),所以决定总结一下二者的区别。

1.jquery方式传参和接收参数

传参:

this.$router.push({
  path:'/xxx'
  query:{
   id:id
  }
  })

接收参数:

this.$route.query.id

注意:传参是this.$router,接收参数是this.$route,这里千万要看清了!!!

this.$router 和this.$route有何区别?

在控制台打印两者可以很明显的看出两者的一些区别:

浅析vue-router jquery和params传参(接收参数)$router $route的区别

1.$router为VueRouter实例,想要导航到不同URL,则使用$router.push方法

2.$route为当前router跳转对象,里面可以获取name、path、query、params等

2.params方式传参和接收参数

传参:

this.$router.push({
  name:'xxx'
  params:{
   id:id
  }
  })

接收参数:

this.$route.params.id

注意:params传参,push里面只能是 name:'xxxx',不能是path:'/xxx',因为params只能用name来引入路由,如果这里写成了path,接收参数页面会是undefined!!!

另外,二者还有点区别,直白的来说query相当于get请求,页面跳转的时候,可以在地址栏看到请求参数,而params相当于post请求,参数不会再地址栏中显示。

总结

以上所述是小编给大家介绍的浅析vue-router jquery和params传参(接收参数)$router $route的区别,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

jQuery 相关文章推荐
jQuery插件HighCharts绘制简单2D柱状图效果示例【附demo源码】
Mar 21 jQuery
推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)
Apr 21 jQuery
jQuery EasyUI tree增加搜索功能的实现方法
Apr 27 jQuery
jQuery+Ajax实现用户名重名实时检测
Jun 01 jQuery
jQuery实现返回顶部按钮和scroll滚动功能[带动画效果]
Jul 05 jQuery
jQuery实现的文字逐行向上间歇滚动效果示例
Sep 06 jQuery
利用JQUERY实现多个AJAX请求等待的实例
Dec 14 jQuery
jQuery实现的监听导航滚动置顶状态功能示例
Jul 23 jQuery
jquery.param()实现数组或对象的序列化方法
Oct 08 jQuery
如何使用CSS3+JQuery实现悬浮墙式菜单
Jun 18 jQuery
使用jQuery mobile NuGet让你的网站在移动设备上同样精彩
Jun 18 jQuery
jQuery 选择方法及$(this)用法实例分析
May 19 jQuery
jQuery 实现倒计时天,时,分,秒功能
Jul 31 #jQuery
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
Jul 31 #jQuery
jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
Jul 25 #jQuery
jQuery实现导航样式布局操作示例【可自定义样式布局】
Jul 24 #jQuery
jQuery实现菜单的显示和隐藏功能示例
Jul 24 #jQuery
jQuery实现的监听导航滚动置顶状态功能示例
Jul 23 #jQuery
jquery实现搜索框功能实例详解
Jul 23 #jQuery
You might like
php array_slice函数的使用以及参数详解
2008/08/30 PHP
php模拟asp中的XmlHttpRequest实现http请求的代码
2011/03/24 PHP
PHP spl_autoload_register实现自动加载研究
2011/12/06 PHP
PHP可变变量学习小结
2015/11/29 PHP
php文档工具PHP Documentor安装与使用方法
2016/01/25 PHP
phpStudy配置多站点多域名方法及遇到的403错误解决方法
2017/10/19 PHP
JQuery中对服务器控件 DropdownList, RadioButtonList, CheckboxList的操作总结
2011/06/28 Javascript
brook javascript框架介绍
2011/10/10 Javascript
js实现翻页后保持checkbox选中状态的实现方法
2012/11/03 Javascript
js中判断用户输入的值是否为空的简单实例
2013/12/23 Javascript
jquery中map函数与each函数的区别实例介绍
2014/06/23 Javascript
Javascript基础知识(三)BOM,DOM总结
2014/09/29 Javascript
Bootstrap入门书籍之(三)栅格系统
2016/02/17 Javascript
浅谈JavaScript for循环 闭包
2016/06/22 Javascript
js中时间格式化的几种方法
2018/07/22 Javascript
Nodejs中的JWT和Session的使用
2018/08/21 NodeJs
Vue  webpack 项目自动打包压缩成zip文件的方法
2019/07/24 Javascript
layer.confirm点击第一个按钮关闭弹出框的方法
2019/09/09 Javascript
解析vue、angular深度作用选择器
2019/09/11 Javascript
JavaScript如何实现图片处理与合成
2020/05/29 Javascript
python实现的一个火车票转让信息采集器
2014/07/09 Python
简单介绍利用TK在Python下进行GUI编程的教程
2015/04/13 Python
Python实现的数据结构与算法之双端队列详解
2015/04/22 Python
python使用xlrd模块读写Excel文件的方法
2015/05/06 Python
常见python正则用法的简单实例
2016/06/21 Python
通过selenium抓取某东的TT购买记录并分析趋势过程解析
2019/08/15 Python
解决python -m pip install --upgrade pip 升级不成功问题
2020/03/05 Python
python 日志模块 日志等级设置失效的解决方案
2020/05/26 Python
详解如何在PyCharm控制台中输出彩色文字和背景
2020/08/17 Python
Java方面的关于数组和继承的笔面试题
2015/09/18 面试题
自我鉴定四大框架
2014/01/17 职场文书
3.15国际消费者权益日主题活动活动总结
2014/03/16 职场文书
交通事故死亡赔偿协议书
2014/12/03 职场文书
经理岗位职责
2015/02/02 职场文书
推广普通话的宣传语
2015/07/13 职场文书
德劲DE1108畅想
2021/04/22 无线电