容易混淆-論query和params在前後端中的區別

摘要： 前言 最近在學node，試著做一個前後端都有的專案 然後就遇到了query和parmas這倆兄弟 你說他們倆長得也不像吧 可這用法實在是太類似了 這不，專門寫篇文章來區分這哥倆 分別會從vue路由 和Node接收...

前言

最近在學node，試著做一個前後端都有的專案

然後就遇到了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向後端傳送一個請求，傳送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 在前端路由以及後端接收中的區別

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

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