深入了解query和params的使用區(qū)別

前言

路由傳參的時(shí)候，有倆兄弟，一個(gè)叫query，一個(gè)叫parmas

你說(shuō)他們倆長(zhǎng)得也不像吧，可這用法實(shí)在是太類(lèi)似了

下面就讓我們分別從vue路由和Node接收兩個(gè)角度講他們的區(qū)別

vue路由中的傳參

假設(shè)我們現(xiàn)在需要實(shí)現(xiàn)一個(gè)路由切換，點(diǎn)擊之切換到W組件

并傳遞一個(gè)id值和一個(gè)age值

我們運(yùn)用router-link來(lái)寫(xiě)

然后一連串的疑惑就產(chǎn)生了

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

對(duì)于query和parmas來(lái)說(shuō)

1. A用name還是path？
2. routes要怎么寫(xiě)？
3. url長(zhǎng)什么樣？
4. 會(huì)有什么隱藏的坑么

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設(shè)置

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

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

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

后者基于path來(lái)設(shè)置routes

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

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

這兩種方法，都可以自定義path的樣式，
不過(guò)一個(gè)是在router-link to里面定義，一個(gè)則是在routes里面定義
在接收參數(shù)的時(shí)候都是使用this.$route.query.id

parmas：

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

這里只能用name不能用path，不然會(huì)直接無(wú)視掉params中的內(nèi)容
然后在routes中添加

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

這里的name與上面router-link中的name保持一致

url就取決于這個(gè)path的寫(xiě)法http://localhost:8080/#/W/1234/12

注意，path里面的/w可以任意寫(xiě)，寫(xiě)成/hhhhh也可以

但是！

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

不寫(xiě)的話，第一次點(diǎn)擊可以實(shí)現(xiàn)組件跳轉(zhuǎn)

且可以通過(guò)this.$route.parmas.id獲取到傳過(guò)來(lái)的id值，但如果

刷新頁(yè)面，傳過(guò)來(lái)的id值和age值就會(huì)丟失

從這也能看出params比query嚴(yán)格

Node中的req.query和req.params

在后端中，要接受前端的axios請(qǐng)求

于是我們又碰到了這哥倆

什么樣的axios請(qǐng)求對(duì)應(yīng)什么樣的接受方式？

還有不止是req.query,req.params,又混進(jìn)來(lái)一個(gè)req.body

好家伙，亂成一鍋粥

假設(shè)前端現(xiàn)在用axios向后端發(fā)送一個(gè)請(qǐng)求，發(fā)送id值請(qǐng)求后端的數(shù)據(jù)

req.query

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

或者

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

在前端里面，router怎么發(fā)送的就怎么收

query發(fā)送的就用this.$route.query接收

params發(fā)送的就用this.$route.params接收

但是在這里，雖然第二種方式里面有params

但這兩種我們都要用req.query.id來(lái)獲取里面的id值

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

req.params

那如果直接把id值寫(xiě)進(jìn)發(fā)送的url里面呢

axios.get(`/api/1234`)

看這個(gè)形式有沒(méi)有覺(jué)得很眼熟
它跟上面params的url非常像, 我們就反向操作一下

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

如果它是這么請(qǐng)求的

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

中間用-或者&隔開(kāi)
那我們也可以在獲取時(shí)的路徑上這么寫(xiě)

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

req.body

上面兩個(gè)都是處理get請(qǐng)求的

而這位小兄弟就是用來(lái)處理post請(qǐng)求的
(需要安裝body-parser中間件）

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

我們就用req.body來(lái)接收

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

總結(jié)

我們歸納了query和params在前端路由以及后端接收中的區(qū)別

容易混淆的東西還是得多寫(xiě)，多總結(jié)

希望這篇文章對(duì)大家分清它們的使用場(chǎng)景有所幫助

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。