深入了解query和params的使用區別

前言

路由傳參的時候，有倆兄弟，一個叫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在前端路由以及后端接收中的區別

容易混淆的東西還是得多寫，多總結

希望這篇文章對大家分清它們的使用場景有所幫助

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。