浅析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实现的动态文字变化输出效果示例【附演示与demo源码下载】
Mar 24 jQuery
jQuery ajax请求struts action实现异步刷新
Apr 19 jQuery
jQuery鼠标悬停内容动画切换效果
Apr 27 jQuery
jquery实现左右轮播图效果
Sep 28 jQuery
Vue引入jquery实现平滑滚动到指定位置
May 09 jQuery
详解jQuery中的getAll()和cleanData()
Apr 15 jQuery
JQuery样式操作、click事件以及索引值-选项卡应用示例
May 14 jQuery
jQuery子选择器与可见性选择器实例分析
Jun 28 jQuery
jQuery中DOM操作原则实例分析
Aug 01 jQuery
基于jquery ajax的多文件上传进度条过程解析
Sep 11 jQuery
jquery实现两个div中的元素相互拖动的方法分析
Apr 05 jQuery
jQuery实现异步上传一个或多个文件
Aug 17 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
基于mysql的论坛(5)
2006/10/09 PHP
PHP获取表单textarea数据中的换行问题
2010/09/10 PHP
thinkphp文件引用与分支结构用法实例
2014/11/26 PHP
PHP MPDF中文乱码的解决方式
2015/12/08 PHP
PHP保存session到memcache服务器的方法
2016/01/19 PHP
jquery 分页控件实现代码
2009/11/30 Javascript
ExtJS 2.0 GridPanel基本表格简明教程
2010/05/25 Javascript
jQuery.Validate 使用笔记(jQuery Validation范例 )
2010/06/25 Javascript
用jquery实现的模拟QQ邮箱里的收件人选取及其他效果(一)
2011/01/06 Javascript
jquery ajax学习笔记2 使用XMLHttpRequest对象的responseXML
2011/10/16 Javascript
javascript判断机器是否联网的2种方法
2013/08/09 Javascript
js中reverse函数的用法详解
2013/12/26 Javascript
jQuery移除tr无效的解决方法(tr是动态添加)
2014/09/22 Javascript
JavaScript中的Truthy和Falsy介绍
2015/01/01 Javascript
javascript精确统计网站访问量实例代码
2015/12/19 Javascript
javascript特效实现——当前时间和倒计时效果的简单实例
2016/07/20 Javascript
微信公众号  提示:Unauthorized API function 问题解决方法
2016/12/05 Javascript
详解jquery easyui之datagrid使用参考
2016/12/05 Javascript
原生javascript实现图片放大镜效果
2017/01/18 Javascript
基于zepto.js实现手机相册功能
2017/07/11 Javascript
详解如何为你的angular app构建一个第三方库
2018/12/07 Javascript
Python实现爬取逐浪小说的方法
2015/07/07 Python
Python的净值数据接口调用示例分享
2016/03/15 Python
用Python写一个自动木马程序
2019/09/17 Python
python中for循环变量作用域及用法详解
2019/11/05 Python
python打开音乐文件的实例方法
2020/07/21 Python
python 实现单例模式的5种方法
2020/09/23 Python
canvas基础之图形验证码的示例
2018/01/02 HTML / CSS
自荐信如何“自荐”
2013/10/24 职场文书
人力资源专业推荐信
2013/11/29 职场文书
幼儿园亲子活动总结
2014/04/26 职场文书
群众路线教育实践活动总结
2014/10/30 职场文书
公务员年度考核评语
2014/12/31 职场文书
2015年护理工作总结范文
2015/04/03 职场文书
《唯一的听众》教学反思
2016/02/18 职场文书
python Tkinter的简单入门教程
2021/04/11 Python