浅析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插件Echarts实现的渐变色柱状图
Mar 23 jQuery
Jquery中attr与prop的区别详解
May 27 jQuery
jQuery实现注册会员时密码强度提示信息功能示例
Sep 05 jQuery
jQuery实现html双向绑定功能示例
Oct 09 jQuery
jQuery实现所有验证通过方可提交的表单验证
Nov 21 jQuery
基于jQuery实现无缝轮播与左右点击效果
May 13 jQuery
jQuery中的类名选择器(.class)用法简单示例
May 14 jQuery
基于jQuery实现的设置文本区域的光标位置
Jun 15 jQuery
使用jQuery给Table动态增加行、清空table的方法
Sep 05 jQuery
jQuery实现动态添加和删除input框实例代码
Mar 26 jQuery
jquery将信息遍历到界面上实例代码
Jan 21 jQuery
jQuery实现点击滚动到指定元素上的方法分析
Mar 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
php4与php5的区别小结(配置异同)
2011/12/20 PHP
php输出xml属性的方法
2015/03/19 PHP
在CentOS系统上从零开始搭建WordPress博客的全流程记录
2016/04/21 PHP
php实现带读写分离功能的MySQL类完整实例
2016/07/28 PHP
PHP实现的简单sha1加密功能示例
2017/08/27 PHP
关于javascript中this关键字(翻译+自我理解)
2010/10/20 Javascript
javascript object array方法使用详解
2012/12/03 Javascript
为什么要在引入的css或者js文件后面加参数的详细讲解
2013/05/03 Javascript
判断一个变量是数组Array类型的方法
2013/09/16 Javascript
JQuery实现table行折叠效果以JSON做数据源
2014/05/26 Javascript
jQuery实现简单网页遮罩层/弹出层效果兼容IE6、IE7
2014/06/16 Javascript
最新最热最实用的15个jQuery插件汇总
2015/07/05 Javascript
基于AngularJS实现页面滚动到底自动加载数据的功能
2015/10/16 Javascript
为JQuery EasyUI 表单组件增加焦点切换功能的方法
2017/04/13 jQuery
通过命令行创建vue项目的方法
2017/07/20 Javascript
CKEditor 4.4.1 添加代码高亮显示插件功能教程【使用官方推荐Code Snippet插件】
2019/06/14 Javascript
在小程序中推送模板消息的实现方法
2019/07/22 Javascript
Element-UI中关于table表格的那些骚操作(小结)
2019/08/15 Javascript
解决vue的过渡动画无法正常实现问题
2019/10/31 Javascript
使用Vant完成通知栏Notify的提示操作
2020/11/11 Javascript
[10:14]2018DOTA2国际邀请赛寻真——paiN Gaming不仅为自己而战
2018/08/14 DOTA
python网络编程之数据传输UDP实例分析
2015/05/20 Python
python Matplotlib画图之调整字体大小的示例
2017/11/20 Python
30秒轻松实现TensorFlow物体检测
2018/03/14 Python
Python读写zip压缩文件的方法
2018/08/29 Python
python 实现ping测试延迟的两种方法
2020/12/10 Python
python 将html转换为pdf的几种方法
2020/12/29 Python
HTML5打开手机扫码功能及优缺点
2017/11/27 HTML / CSS
Agoda西班牙:全球特价酒店预订
2017/06/03 全球购物
优秀的毕业生的自我评价
2013/12/12 职场文书
高中生期末评语
2014/01/28 职场文书
党委班子对照检查材料
2014/08/19 职场文书
工作所在部门证明
2014/09/21 职场文书
一般基层干部群众路线教育实践活动个人对照检查材料
2014/11/04 职场文书
2015年教师师德师风承诺书
2015/04/28 职场文书
2016八一建军节慰问信
2015/11/30 职场文书