前言

路由傳參的時候，有倆兄弟，一個叫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', //這里必須是Wcomponent: W}

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

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

后者基于path來設置routes

{path: '/W', //這里必須是Wname: '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

好家伙，亂成一鍋粥