深入了解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 相关文章推荐
js页面跳转常用的几种方式
Nov 25 Javascript
String.prototype实现的一些javascript函数介绍
Nov 22 Javascript
JavaScript中window.showModalDialog()用法详解
Dec 18 Javascript
jQuery对象的selector属性用法实例
Dec 27 Javascript
javascript实现按回车键切换焦点
Feb 09 Javascript
详细解读JavaScript的跨浏览器事件处理
Aug 12 Javascript
javascript封装addLoadEvent实现页面同时加载执行多个函数的方法
Jul 25 Javascript
Bootstrap文件上传组件之bootstrap fileinput
Nov 25 Javascript
jQuery内存泄露解决办法
Dec 13 Javascript
如何解决hover在ie6中的兼容性问题
Dec 15 Javascript
Vue实现星级评价效果实例详解
Dec 30 Javascript
es6中class类静态方法,静态属性,实例属性,实例方法的理解与应用分析
Feb 15 Javascript
如何使用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
PHP程序61条面向对象分析设计的经验小结
2008/11/12 PHP
golang、python、php、c++、c、java、Nodejs性能对比
2017/03/12 NodeJs
轻松创建nodejs服务器(10):处理上传图片
2014/12/18 NodeJs
jquery简单实现图片切换效果的方法
2015/05/12 Javascript
深入理解Javascript箭头函数中的this
2017/02/13 Javascript
js中编码函数:escape,encodeURI与encodeURIComponent详解
2017/03/21 Javascript
Javascript实现登录记住用户名和密码功能
2017/03/22 Javascript
js自定义瀑布流布局插件
2017/05/16 Javascript
在vue项目中集成graphql(vue-ApolloClient)
2018/09/08 Javascript
vue里input根据value改变背景色的实例
2018/09/29 Javascript
深入解析ES6中的promise
2018/11/08 Javascript
Vue 组件注册实例详解
2019/02/23 Javascript
vue 集成jTopo 处理方法
2019/08/07 Javascript
前端 javascript 实现文件下载的示例
2020/11/24 Javascript
[05:20]2018DOTA2亚洲邀请赛主赛事第三日战况回顾 LGD率先挺进胜者组决赛
2018/04/06 DOTA
python分析apache访问日志脚本分享
2015/02/26 Python
python操作redis的方法
2015/07/07 Python
python实现冒泡排序算法的两种方法
2018/03/10 Python
python查看列的唯一值方法
2018/07/17 Python
Python反射和内置方法重写操作详解
2018/08/27 Python
Flask框架单例模式实现方法详解
2019/07/31 Python
PyTorch中常用的激活函数的方法示例
2019/08/20 Python
Pytorch之finetune使用详解
2020/01/18 Python
基于logstash实现日志文件同步elasticsearch
2020/08/06 Python
Selenium webdriver添加cookie实现过程详解
2020/08/12 Python
Pycharm创建python文件自动添加日期作者等信息(步骤详解)
2021/02/03 Python
html5新增的属性和废除的属性简要概述
2013/02/20 HTML / CSS
介绍一下如何利用路径遍历进行攻击及如何防范
2014/01/19 面试题
C#中类(class)与结构(struct)的异同
2013/11/03 面试题
医学生自荐信范文
2013/12/03 职场文书
工程造价专业大学生职业规划范文
2014/03/09 职场文书
《泉水》教学反思
2014/04/11 职场文书
项目经理任命书范本
2014/06/05 职场文书
安全横幅标语
2014/06/09 职场文书
2014年大学生社会实践自我鉴定
2014/09/26 职场文书
mysql查看表结构的三种方法总结
2022/07/07 MySQL