浅析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.guide.js新版上线操作向导镂空提示jQuery插件(推荐)
May 20 jQuery
JQuery 封装 Ajax 常用方法(推荐)
May 21 jQuery
jquery实现图片放大点击切换
Jun 06 jQuery
jquery版轮播图效果和extend扩展
Jul 18 jQuery
jQuery选择器之子元素过滤选择器
Sep 28 jQuery
jquery实现企业定位式导航效果
Jan 01 jQuery
Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
Aug 09 jQuery
jquery分页插件pagination使用教程
Oct 23 jQuery
jQuery 同时获取多个标签的指定内容并储存为数组
Nov 20 jQuery
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
Jan 09 jQuery
原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作
Feb 27 jQuery
jquery.pager.js实现分页效果
Jul 29 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的日期处理函数及uchome的function_coomon中日期处理函数的研究
2011/01/12 PHP
PHP中addcslashes与stripcslashes函数用法分析
2016/01/07 PHP
tp5实现微信小程序多图片上传到服务器功能
2018/07/16 PHP
Yii框架 session 数据库存储操作方法示例
2019/11/18 PHP
PHP实现基本留言板功能原理与步骤详解
2020/03/26 PHP
Javascript的一种模块模式
2010/09/08 Javascript
基于jQuery的获取标签名的代码
2012/07/16 Javascript
JS限制上传图片大小不使用控件在本地实现
2012/12/19 Javascript
jquery 页面滚动到底部自动加载插件集合
2014/01/31 Javascript
jquery.form.js用法之清空form的方法
2014/03/07 Javascript
jquery实现键盘左右翻页特效
2015/04/30 Javascript
jquery插件unobtrusive实现片段式加载
2015/06/15 Javascript
jQuery实现平滑滚动的标签分栏切换效果
2015/08/28 Javascript
webpack打包后直接访问页面图片路径错误的解决方法
2017/06/17 Javascript
Angular 5.x 学习笔记之Router(路由)应用
2018/04/08 Javascript
详解vue2.0+axios+mock+axios-mock+adapter实现登陆
2018/07/19 Javascript
vue-image-crop基于Vue的移动端图片裁剪组件示例
2018/08/28 Javascript
使用wxapp-img-loader自定义组件实现微信小程序图片预加载功能
2018/10/18 Javascript
微信小程序开发技巧汇总
2019/07/15 Javascript
JavaScript实现拖拽和缩放效果
2020/08/24 Javascript
Nuxt pages下不同的页面对应layout下的页面布局操作
2020/11/05 Javascript
[01:59]DOTA2首部纪录片《Free to play》预告片
2014/03/12 DOTA
朴素贝叶斯算法的python实现方法
2014/11/18 Python
python判断列表的连续数字范围并分块的方法
2018/11/16 Python
python conda操作方法
2019/09/11 Python
Python利用matplotlib绘制约数个数统计图示例
2019/11/26 Python
使用python的turtle函数绘制一个滑稽表情
2020/02/28 Python
Python 定义只读属性的实现方式
2020/03/05 Python
使用卷积神经网络(CNN)做人脸识别的示例代码
2020/03/27 Python
Zavvi西班牙:电子游戏、极客服装、Blu-ray、Funko Pop等
2019/05/03 全球购物
罗马尼亚购物网站:Vivantis.ro
2019/07/20 全球购物
Java如何读取CLOB字段
2013/10/10 面试题
毕业生自荐信的主要内容
2013/10/29 职场文书
信息管理专业推荐信
2013/10/29 职场文书
协议书范本
2014/04/23 职场文书
雷锋的故事观后感
2015/06/10 职场文书