深入了解query和params的使用区别


Posted in Javascript onJune 24, 2019

前言

路由传参的时候,有俩兄弟,一个叫query,一个叫parmas

你说他们俩长得也不像吧,可这用法实在是太类似了

下面就让我们分别从vue路由和Node接收两个角度讲他们的区别

vue路由中的传参

假设我们现在需要实现一个路由切换,点击之切换到W组件

并传递一个id值和一个age值

我们运用router-link来写

然后一连串的疑惑就产生了

<router-link :to="{ A: 'xxx', query: { xx:'xxx' }}" />
<router-link :to="{ A: 'xxx', parmas: { xx:'xxx' }}" />
routes:{ ??? }

对于query和parmas来说

  1. A用name还是path?
  2. routes要怎么写?
  3. url长什么样?
  4. 会有什么隐藏的坑么

query:

<router-link :to="{ name: 'W', query: { id:'1234',age:'12' }}"/>
<router-link :to="{ path: '/W', query: { id:'1234',age:'12' }}"/>

name和path都可以用

前者的routes基于name设置

{
path: '/hhhhhhh', //这里可以任意
name: 'W', //这里必须是W
component: W
}

然后就把path匹配添加到url上去

http://localhost:8080/#/hhhhhhh?id=1234&age=12

后者基于path来设置routes

{
path: '/W', //这里必须是W
name: 'hhhhhhhh', //这里任意
component: W
}

url:http://localhost:8080/#/W?id=1234&age=12

这两种方法,都可以自定义path的样式,
不过一个是在router-link to里面定义,一个则是在routes里面定义
在接收参数的时候都是使用this.$route.query.id

parmas:

<router-link :to="{ name: 'W', params: { id:'1234',age:'12' }}"/>

这里只能用name不能用path,不然会直接无视掉params中的内容
然后在routes中添加

{
path:'/W/:id/:age',
name:'W',
component:W
}

这里的name与上面router-link中的name保持一致

url就取决于这个path的写法http://localhost:8080/#/W/1234/12

注意,path里面的/w可以任意写,写成/hhhhh也可以

但是!

/:id和/:age不能省略,且不能改名字

不写的话,第一次点击可以实现组件跳转

且可以通过this.$route.parmas.id获取到传过来的id值,但如果

刷新页面,传过来的id值和age值就会丢失

从这也能看出params比query严格

Node中的req.query和req.params

在后端中,要接受前端的axios请求

于是我们又碰到了这哥俩

什么样的axios请求对应什么样的接受方式?

还有不止是req.query,req.params,又混进来一个req.body

好家伙,乱成一锅粥

假设前端现在用axios向后端发送一个请求,发送id值请求后端的数据

req.query

axios.get(`/api/?id=1234`)

或者

axios.get(`/api`,{ params:{id:'1234' })

在前端里面,router怎么发送的就怎么收

query发送的就用this.$route.query接收

params发送的就用this.$route.params接收

但是在这里,虽然第二种方式里面有params

但这两种我们都要用req.query.id来获取里面的id值

router.get('/api',function(req,res){
console.log(req.query.id)
.......
})

req.params

那如果直接把id值写进发送的url里面呢

axios.get(`/api/1234`)

看这个形式有没有觉得很眼熟
它跟上面params的url非常像, 我们就反向操作一下

router.get('/api/:id',function(req,res){
console.log(req.params.id)
.......
})

如果它是这么请求的

axios.get(`/api/1234-12`)

中间用-或者&隔开
那我们也可以在获取时的路径上这么写

router.get('/api/:id-:age',function(req,res){
console.log(req.params.id)
console.log(req.params.age)
.......
})

req.body

上面两个都是处理get请求的

而这位小兄弟就是用来处理post请求的
(需要安装body-parser中间件)

axios.post(`/api`,{ id:'1234' })

我们就用req.body来接收

router.get('/api',function(req,res){
console.log(req.body.id)
.......
})

总结

我们归纳了query和params在前端路由以及后端接收中的区别

容易混淆的东西还是得多写,多总结

希望这篇文章对大家分清它们的使用场景有所帮助

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery下动态显示jqGrid以及jqGrid的属性设置容易出现问题的解决方法
Oct 22 Javascript
javascript 三种方法实现获得和设置以及移除元素属性
Mar 20 Javascript
javascript预加载图片、css、js的方法示例介绍
Oct 14 Javascript
jQuery获取和设置表单元素的方法
Feb 14 Javascript
jQuery中on()方法用法实例
Jan 19 Javascript
Javascript实现苹果悬浮虚拟按钮
Apr 10 Javascript
巧用Javascript的逻辑运算符
Dec 02 Javascript
AngularJS执行流程详解
Feb 17 Javascript
JavaScript之DOM插入更新删除_动力节点Java学院整理
Jul 03 Javascript
node文字生成图片的示例代码
Oct 26 Javascript
vue检测对象和数组的变化分析
Jun 30 Javascript
JQuery实现简单的复选框树形结构图示例【附源码下载】
Jul 16 jQuery
如何使用JavaScript实现栈与队列
Jun 24 #Javascript
简单了解JavaScript中的执行上下文和堆栈
Jun 24 #Javascript
一次让你了解全部JavaScript的作用域
Jun 24 #Javascript
通过循环优化 JavaScript 程序
Jun 24 #Javascript
在React中写一个Animation组件为组件进入和离开加上动画/过度效果
Jun 24 #Javascript
node中实现删除目录的几种方法
Jun 24 #Javascript
什么时候不能在 Node.js 中使用 Lock Files
Jun 24 #Javascript
You might like
Zend Framework教程之路由功能Zend_Controller_Router详解
2016/03/07 PHP
Laravel框架实现抢红包功能示例
2019/10/31 PHP
详解Laravel服务容器的绑定与解析
2019/11/05 PHP
tp5.1框架数据库子查询操作实例分析
2020/05/26 PHP
js控制表单操作的常用代码小结
2013/08/15 Javascript
document.getElementBy(&quot;id&quot;)与$(&quot;#id&quot;)有什么区别
2013/09/22 Javascript
jquery实现多级下拉菜单的实例代码
2013/10/02 Javascript
原生js和jquery中有关透明度设置的相关问题
2014/01/08 Javascript
JavaScript转换二进制编码为ASCII码的方法
2015/04/16 Javascript
基于jQuery全屏焦点图左右切换插件responsiveslides
2015/09/07 Javascript
JS+Canvas绘制时钟效果
2020/08/20 Javascript
详细解读Jquery各Ajax函数($.get(),$.post(),$.ajax(),$.getJSON())
2016/08/15 Javascript
jQuery的中 is(':visible') 解析及用法(必看)
2017/02/12 Javascript
jQuery实现获取及设置CSS样式操作详解
2018/09/05 jQuery
详解JavaScript中操作符和表达式
2018/09/12 Javascript
Angular封装搜索框组件操作示例
2019/04/25 Javascript
html+jQuery实现拖动滑块图片拼图验证码插件【移动端适用】
2019/09/10 jQuery
基于vue-draggable 实现三级拖动排序效果
2020/01/10 Javascript
基于openlayers实现角度测量功能
2020/09/28 Javascript
[44:21]Ti4 循环赛第四日 附加赛NEWBEE vs LGD
2014/07/13 DOTA
python中dict字典的查询键值对 遍历 排序 创建 访问 更新 删除基础操作方法
2018/09/13 Python
解决python "No module named pip" 的问题
2018/10/13 Python
Python中单线程、多线程和多进程的效率对比实验实例
2019/05/14 Python
win10系统下python3安装及pip换源和使用教程
2020/01/06 Python
python软件测试Jmeter性能测试JDBC Request(结合数据库)的使用详解
2021/01/26 Python
美国名牌太阳镜折扣网站:Eyedictive
2017/05/15 全球购物
Lookfantastic西班牙官网:英国知名美妆购物网站
2018/06/13 全球购物
Boom手表官网:瑞典手表品牌,设计你的手表
2019/03/11 全球购物
电子商务专业求职信
2014/03/08 职场文书
农村面貌改造提升实施方案
2014/03/18 职场文书
不服从公司安排检讨书
2014/09/24 职场文书
2014工程部年度工作总结
2014/12/17 职场文书
党员公开承诺书2015
2015/01/21 职场文书
英文升职感谢信
2015/01/23 职场文书
爱国影片观后感
2015/06/18 职场文书
解决pytorch 损失函数中输入输出不匹配的问题
2021/06/05 Python