容易混淆-論query和params在前後端中的區別
前言
最近在學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
來說
- A用name還是path?
- routes要怎麼寫?
- url長什麼樣?
- 會有什麼隱藏的坑麼
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
在前端路由以及後端接收中的區別
容易混淆的東西還是得多寫,多總結
希望這篇文章對大家分清它們的使用場景有所幫助