浅析vue-router中params和query的区别


Posted in Javascript onDecember 24, 2019

1.引入方式不同

query要用path来引入

this.$router.push({
  path: 'test',
  query: {
    type: 2,
    detail: '哈哈'
  }
})

params要用name来引入

this.$router.push({
  name: 'test',
  query: {
    type: 2,
    detail: '哈哈'
  }
})

2.url不同

query在url中显示参数

http://localhost:8080/detail?type=0&detail=哈哈
params在url中不显示参数

http://localhost:8080/detail

下面整理一下这两者的差别:

1、用法上的

刚才已经说了,query要用path来引入,params要用name来引入,接收参数都是类似的,分别是this.$route.query.name和this.$route.params.name。

注意接收参数的时候,已经是$route而不是$router了哦!!

2、展示上的

query更加类似于我们ajax中get传参,params则类似于post,说的再简单一点,前者在浏览器地址栏中显示参数,后者则不显示

query:       

浅析vue-router中params和query的区别

params:    

浅析vue-router中params和query的区别

总结

以上所述是小编给大家介绍的vue-router中params和query的区别,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
html读出文本文件内容
Jan 22 Javascript
28个JS验证函数收集
Mar 02 Javascript
Javascript面向对象之四 继承
Feb 08 Javascript
输入密码检测大写是否锁定js实现代码
Dec 03 Javascript
jQuery调用AJAX时Get和post公用的乱码解决方法实例说明
Jun 04 Javascript
js获取触发事件元素在整个网页中的绝对坐标(示例代码)
Dec 13 Javascript
详解JavaScript的Polymer框架中的通知交互
Jul 29 Javascript
javascript实现选中复选框后相关输入框变灰不可用的方法
Aug 11 Javascript
4个顶级开源JavaScript图表库
Sep 29 Javascript
详解Vue 匿名、具名和作用域插槽的使用方法
Apr 22 Javascript
JS中比Switch...Case更优雅的多条件判断写法
Sep 05 Javascript
解决vue项目刷新后,导航菜单高亮显示的位置不对问题
Nov 01 Javascript
JavaScript实现英语单词题库
Dec 24 #Javascript
iSlider手机端图片滑动切换插件使用详解
Dec 24 #Javascript
微信小程序自定义模态弹窗组件详解
Dec 24 #Javascript
js实现鼠标点击页面弹出自定义文字效果
Dec 24 #Javascript
javascript实现鼠标点击生成文字特效
Dec 24 #Javascript
Javascript实现鼠标点击冒泡特效
Dec 24 #Javascript
javascript实现点击星星小游戏
Dec 24 #Javascript
You might like
PHP学习笔记 IIS7下安装配置php环境
2012/10/29 PHP
CodeIgniter采用config控制的多语言实现根据浏览器语言自动转换功能
2014/07/18 PHP
Paypal实现循环扣款(订阅)功能
2017/03/23 PHP
在云虚拟主机部署thinkphp5项目的步骤详解
2017/12/21 PHP
PHP使用OB缓存实现静态化功能示例
2019/03/23 PHP
flexigrid 参数说明
2010/11/23 Javascript
运算符&&的三个不同层次
2013/04/07 Javascript
Javascript中克隆一个数组的实现代码
2013/12/06 Javascript
php中给js数组赋值方法
2014/03/10 Javascript
jQuery实现图片左右滚动特效
2020/04/20 Javascript
jQuery实现简单的点赞效果
2020/05/29 Javascript
超漂亮的Bootstrap 富文本编辑器summernote
2016/04/05 Javascript
JS代码防止SQL注入的方法(超简单)
2016/04/12 Javascript
浅谈JavaScript的push(),pop(),concat()方法
2016/06/03 Javascript
理解javascript中的Function.prototype.bind的方法
2017/02/03 Javascript
js实现PC端根据IP定位当前城市地理位置
2017/02/22 Javascript
jQuery简单实现向列表动态添加新元素的方法示例
2017/12/25 jQuery
js实现轮播图的完整代码
2020/10/26 Javascript
AngularJS实现的鼠标拖动画矩形框示例【可兼容IE8】
2019/05/17 Javascript
如何提升vue.js中大型数据的性能
2019/06/21 Javascript
2分钟实现一个Vue实时直播系统的示例代码
2020/06/05 Javascript
JavaScript 实现轮播图特效的示例
2020/11/05 Javascript
Python内置数据结构与操作符的练习题集锦
2016/07/01 Python
Python模拟登录之滑块验证码的破解(实例代码)
2019/11/18 Python
Python异常处理机制结构实例解析
2020/07/23 Python
Python+Selenium随机生成手机验证码并检查页面上是否弹出重复手机号码提示框
2020/09/21 Python
HTML 5.1来了 9月份正式发布 更新内容预览
2016/04/26 HTML / CSS
HTML5高仿微信聊天、微信聊天表情|对话框|编辑器功能
2018/04/23 HTML / CSS
Nip + Fab官网:英国美容品牌
2019/08/26 全球购物
新奥尔良珠宝:Mignon Faget
2020/11/23 全球购物
情侣吵架检讨书
2014/02/05 职场文书
《小石潭记》教学反思
2014/02/13 职场文书
2014年市场部工作总结
2014/11/25 职场文书
2014年办公室文秘工作总结
2014/12/09 职场文书
新学期主题班会
2015/08/17 职场文书
解决golang结构体tag编译错误的问题
2021/05/02 Golang