前言

創(chuàng)新互聯(lián)是專業(yè)的瑯琊網(wǎng)站建設(shè)公司，瑯琊接單;提供成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作,網(wǎng)頁設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行瑯琊網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來合作!

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

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

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

vue路由中的傳參

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

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

我們運(yùn)用router-link來寫

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

routes:{ ??? }

對(duì)于query和parmas來說

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

query：

name和path都可以用

前者的routes基于name設(shè)置

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

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

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

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

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

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

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

parmas：

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

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

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

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

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

但是！

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

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

且可以通過this.$route.parmas.id獲取到傳過來的id值，但如果

刷新頁面，傳過來的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)來一個(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來獲取里面的id值

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

req.params

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

axios.get(`/api/1234`)

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

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

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

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

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

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

req.body

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

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

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

我們就用req.body來接收

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

總結(jié)

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

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

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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。