浅析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 相关文章推荐
jquery中get和post的简单实例
Feb 04 Javascript
javascript验证身份证号
Mar 03 Javascript
js实现透明度渐变效果的方法
Apr 10 Javascript
JS动态生成年份和月份实例代码
Feb 04 Javascript
js获取地址栏中传递的参数(两种方法)
Feb 08 Javascript
js实现一个简单的数字时钟效果
Mar 29 Javascript
JS 组件系列之 bootstrap treegrid 组件封装过程
Apr 28 Javascript
VUE2 前端实现 静态二级省市联动选择select的示例
Feb 09 Javascript
JS引用传递与值传递的区别与用法分析
Jun 01 Javascript
微信小程序使用setData修改数组中单个对象的方法分析
Dec 30 Javascript
原生JS使用Canvas实现拖拽式绘图功能
Jun 05 Javascript
vue实现购物车选择功能
Jan 10 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
不用iconv库的gb2312与utf-8的互换函数
2006/10/09 PHP
IStream与TStream之间的相互转换
2008/08/01 PHP
PHP中使用unset销毁变量并内存释放问题
2012/07/05 PHP
php中in_array函数用法探究
2014/11/25 PHP
php实现的Curl封装类Curl.class.php用法实例分析
2015/09/25 PHP
PHP带节点操作的无限分类实现方法详解
2016/11/09 PHP
javascript 函数式编程
2007/08/16 Javascript
对字符串进行HTML编码和解码的JavaScript函数
2010/02/01 Javascript
JQuery $.each遍历JavaScript数组对象实例
2014/09/01 Javascript
基于javascript实现样式清新图片轮播特效
2016/03/30 Javascript
VueJs路由跳转——vue-router的使用详解
2017/01/10 Javascript
详解如何在NodeJS项目中优雅的使用ES6
2017/04/22 NodeJs
jquery实现侧边栏左右伸缩效果的示例
2017/12/19 jQuery
Angularjs Promise实例详解
2018/03/15 Javascript
vue+axios新手实践实现登陆的示例代码
2018/06/06 Javascript
vue 对象添加或删除成员时无法实时更新的解决方法
2019/05/01 Javascript
JavaScript实现随机点名器
2020/03/25 Javascript
es6函数中的作用域实例分析
2020/04/18 Javascript
VSCode 配置uni-app的方法
2020/07/11 Javascript
Python urlopen()函数 示例分享
2014/06/12 Python
Python计算开方、立方、圆周率,精确到小数点后任意位的方法
2018/07/17 Python
通过pycharm使用git的步骤(图文详解)
2019/06/13 Python
关于Python3 类方法、静态方法新解
2019/08/30 Python
Python实现TCP探测目标服务路由轨迹的原理与方法详解
2019/09/04 Python
tensorboard 可以显示graph,却不能显示scalar的解决方式
2020/02/15 Python
python中数据库like模糊查询方式
2020/03/02 Python
3种方式实现瀑布流布局小结
2019/09/05 HTML / CSS
哄娃神器4moms商店:美国婴童用品品牌
2019/03/07 全球购物
毕业研究生的自我鉴定
2013/11/30 职场文书
2014信息公开实施方案
2014/02/22 职场文书
婚前协议书
2014/04/15 职场文书
税务职业生涯规划书范文
2014/09/16 职场文书
项目备案申请报告
2015/05/15 职场文书
2016党员干部廉政准则学习心得体会
2016/01/20 职场文书
Python实战之用tkinter库做一个鼠标模拟点击器
2021/04/27 Python
MySQL数据库优化之通过索引解决SQL性能问题
2022/04/10 MySQL