混同しやすい-論queryとparamsの前後端の違い

一.Vueでのルーティングのパラメータ
ルーティング切替を実現する必要があると仮定し、クリックしてW に切り替える.idの値とageの値を渡します.router-linkを使用して書きます.

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

queryとparamsにとって:

Aかpath

か

routersはどのように

を書きます

url長さはどうですか

何か隠れた穴がありますか

1. query : nameもpathも使えます.

name:

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

routesは、nameの設定に基づいています.

{
  path: '/hhhhhhh', //      
  name: 'W',  //     W
  component: W
}

pathマッチングをurlに追加します.

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

path:

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

pathに基づいてroutesを設定します.

{
  path: '/W', //     W
  name: 'hhhhhhhh',  //    
  component: W
}

​ url :

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

どちらの方法も、pathのスタイルをカスタマイズできますが、1つはrouter-link toで定義され、1つはroutesで定義されています.

受信パラメータ:受信パラメータの場合はthis.$route.query.id

を用いる.
2. parmas
ここではnameしか使えません.pathは使えません.そうしないと、paramsの内容を直接無視します.

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

次に、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より厳しいことがわかります.
二.ノードのreq.queryとreq.params
バックエンドでは、フロントエンドのaxiosリクエストを受け入れるため、query、paramsに接触します.
どのようなaxiosリクエストがどのような受け入れ方に対応しているか.req.query、req.paramsだけでなく、req.bodyも増えました.
フロントエンドがaxiosでバックエンドに要求を送信し、id値がバックエンドのデータを要求すると仮定する.
1. req.query

axios.get(`/api/?id=1234`)

または

axios.get(`/api`，{ params:{id:'1234' })

フロントエンドでは、routerがどのように送信されたかはどのように受け取ります.

query送信はthis.$route.query受信

である.

params送信はthis.$route.params受信

である.
しかし、ここでは、2つ目の方法にはparamsがありますが、この2つはreq.query.idでidの値を取得します.

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

2. 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)
    .......
    })

3. req.body
上記の2つはいずれもgetリクエストを処理し、req.bodyはpostリクエストを処理するために使用される.(body-parserミドルウェアを取り付ける必要がある)

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

req.bodyで受け取ります

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

転載先:
混同しやすい-論queryとparamsの前後端の違い