深入了解query和params的使用區(qū)別

前言

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

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

你說(shuō)他們倆長(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來(lái)寫

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

<router-link :to="{ A: 'xxx', query: { xx:'xxx' }}" />
<router-link :to="{ A: 'xxx', parmas: { xx:'xxx' }}" />
routes:{ ??? }

對(duì)于query和parmas來(lái)說(shuō)

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

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設(shè)置

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

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

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

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

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

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

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

parmas：

<router-link :to="{ name: 'W', params: { id:'1234',age:'12' }}"/>

這里只能用name不能用path，不然會(huì)直接無(wú)視掉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)

且可以通過(guò)this.$route.parmas.id獲取到傳過(guò)來(lái)的id值，但如果

刷新頁(yè)面，傳過(guò)來(lái)的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)來(lái)一個(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來(lái)獲取里面的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)求的

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

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

我們就用req.body來(lái)接收

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)。

網(wǎng)站題目：深入了解query和params的使用區(qū)別
當(dāng)前地址：http://muchs.cn/article26/geohcg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站改版、企業(yè)網(wǎng)站制作、App設(shè)計(jì)、關(guān)鍵詞優(yōu)化、域名注冊(cè)、靜態(tài)網(wǎng)站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容