浅析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 禁止鼠标右键并监听右键事件
Apr 27 jQuery
jQuery extend()详解及简单实例
May 06 jQuery
jQueryUI Sortable 应用Demo(分享)
Sep 07 jQuery
原生JS与jQuery编写简单选项卡
Oct 30 jQuery
基于jQuery的$.getScript方法去加载javaScript文档解析
Nov 08 jQuery
jquery如何实现点击空白处隐藏元素
Dec 05 jQuery
jQuery替换节点元素的操作方法
Mar 18 jQuery
jQuery超简单遮罩层实现方法示例
Sep 06 jQuery
jQuery 点击获取验证码按钮及倒计时功能
Sep 20 jQuery
jQuery插件实现非常实用的tab栏切换功能【案例】
Feb 18 jQuery
jquery将json转为数据字典的实例代码
Oct 11 jQuery
JQuery基于FormData异步提交数据文件
Sep 01 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 网页游戏开发入门教程一(webgame+design)
2009/10/26 PHP
国外十大最流行的PHP框架排名
2013/07/04 PHP
php实现字符串首字母大写和单词首字母大写的方法
2015/03/14 PHP
PHP实现批量清空删除指定文件夹所有内容的方法
2017/05/30 PHP
php实现的中秋博饼游戏之绘制骰子图案功能示例
2017/11/06 PHP
如何利用PHP实现上传图片功能详解
2020/09/24 PHP
TBCompressor js代码压缩
2011/01/05 Javascript
推荐20家国外的脚本下载网站
2011/04/28 Javascript
jQuery zclip插件实现跨浏览器复制功能
2015/11/02 Javascript
在 Linux/Unix 中不重启 Vim 而重新加载 .vimrc 文件的流程
2018/03/21 Javascript
Vue 与 Vuex 的第一次接触遇到的坑
2018/08/16 Javascript
微信小程序wx:for循环的实例详解
2018/10/07 Javascript
Vuex modules模式下mapState/mapMutations的操作实例
2019/10/17 Javascript
小程序登录之支付宝授权的实现示例
2019/12/13 Javascript
Python  连接字符串(join %)
2008/09/06 Python
Python中使用PIPE操作Linux管道
2015/02/04 Python
python获取图片颜色信息的方法
2015/03/18 Python
python分析作业提交情况
2017/11/22 Python
python 文本单词提取和词频统计的实例
2018/12/22 Python
Python替换月份为英文缩写的实现方法
2019/07/15 Python
Django 实现图片上传和显示过程详解
2019/07/18 Python
Django ImageFiled上传照片并显示的方法
2019/07/28 Python
Python 写入训练日志文件并控制台输出解析
2019/08/13 Python
pycharm下配置pyqt5的教程(anaconda虚拟环境下+tensorflow)
2020/03/25 Python
使用opencv识别图像红色区域,并输出红色区域中心点坐标
2020/06/02 Python
利用Python实现朋友圈中的九宫格图片效果
2020/09/03 Python
Python Opencv实现单目标检测的示例代码
2020/09/08 Python
Css3圆角边框制作代码
2015/11/18 HTML / CSS
硕士研究生求职自荐信范文
2014/03/11 职场文书
公益广告语集锦
2014/03/13 职场文书
陈欧的广告词
2014/03/18 职场文书
记账会计岗位职责
2014/06/16 职场文书
地理信息科学专业推荐信
2014/09/08 职场文书
个人工作年终总结
2015/03/09 职场文书
毕业设计论文致谢词
2015/05/14 职场文书
三好学生评选事迹材料(2016精选版)
2016/02/25 职场文书