容易混淆-論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在前端路由以及後端接收中的區別
容易混淆的東西仍是得多寫，多總結

但願這篇文章對你們分清它們的使用場景有所幫助