Легко запутаться - в разнице между использованием запроса и параметров

JavaScript

предисловие

При маршрутизации параметров есть два брата, один называетсяquery, называетсяparmas

Вы сказали, что они не похожи, но использование слишком похоже
Давайте начнем сVue маршрута такжеузел получаетРазница между ними с двух сторон

Параметры в маршрутизации 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для

  1. А использует имя или путь?
  2. Как писать маршруты?
  3. Как выглядит URL-адрес?
  4. Есть ли скрытые отверстия?

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ценность будет потеряна

Из этого также видно, что параметры строже, чем запрос

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Разница между внешней маршрутизацией и внутренним получением
Вещи, которые легко спутать, нужно писать больше и резюмировать больше

Надеюсь, эта статья поможет вам разобраться в сценариях их использования.

Категории