Как vue router использует запрос params для передачи параметров и в чем разница

внешний интерфейс Vue.js внешний фреймворк vue-router

Пишите впереди:

Передача параметров — это операция, которую часто приходится использовать интерфейсному интерфейсу. Во многих сценариях требуются параметры, указанные на предыдущей странице. В этой статье подробно рассказывается, как vue router передает параметры, а также некоторые мелкие детали. Друзья в беде могут сделать ссылку, если вам нравится, вы можете поставить лайк или обратить внимание, я надеюсь, что это может помочь всем.

Эта статья была впервые опубликована в моем личном блоге:obkoro1.com

Как передать параметры в Vue router

Что такое параметры и запрос?

параметры: /router1/:id, /router1/123, /router1/789,Идентификатор здесь называется params

Запрос: / Router1? ID = 123, / Router1? Id = 456, здесь идентификатор называется запрос.

Интерфейс маршрутизации:

router.js:

Настройки маршрута здесь,Когда вы используете метод params для передачи параметров, вам нужно добавить имя параметра после маршрута,А при передаче параметров имя параметра должно соответствовать имени параметра, установленному после маршрута. При использовании метода запроса такого ограничения нет, вы можете использовать его прямо в прыжке.

Уведомление:Если вы не пишете параметры на маршруте, вы можете передать его, но ваши параметры не будут отображаться на URL-адресе, а также при переходе на другую страницу или обновлении страницы.параметры будут потеряны(Как показано на рисунке ниже), то HTTP-запросы или другие операции, зависящие от этого параметра, завершатся ошибкой.

Обратите внимание на параметры роутинга выше.Мы установили параметр id в роутинге.Я не задавал id2 в роутинге,поэтому после обновления id2 исчезнет.В проекте мы не можем задать пользователю не обновлять.

Компонент 1:

<template>
  <div class="app_page">
    <h1>从这个路由传参到别的路由</h1>
    <router-link :to="{ name:'router1',params: { id: status ,id2: status3},query: { queryId:  status2 }}" >
      router-link跳转router1
    </router-link>
  </div>
</template>
<script>
export default {
  name: 'app_page',
  data () {
    return {
      status:110,
      status2:120,
      status3:119
    }
  },
}
</script>

Программно перемещаться по переходам:

Вышеупомянутые параметры маршрутизатора также могут быть использованыдокументация маршрутизатораВнутри программной навигации для перехода к параметрам передачи.

    this.$router.push({  name:'router1',params: { id: status ,id2: status3},query: { queryId:  status2 }});
    //编程跳转写在一个函数里面，通过click等方法来触发

Эффект от этих двух параметров абсолютно одинаков Программная навигация может использоваться для принятия решений, например, авторизоваться ли, войти ли в систему и т. д., для тех, кто мало что знает об этом, вы можете пропустить эту программную навигацию и вернуться к ней позже.

Компонент 2:

<template>
  <div class="router1">
    <h1>接收参数的路由</h1>
    <h1> params.id：{{ $route.params }}</h1>
    <h1>query.status:{{ $route.query.queryId }}</h1>
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

Передача параметров относительно проста, и ее можно успешно передать в соответствии с использованием вышеуказанных компонентов.

намекать:Для получения параметров над маршрутом используется $route, после которого нет r.

В чем разница между параметрами и параметрами запроса:

1, params является частью роутинга, должен быть. запрос — это параметр, вставленный после URL-адреса, неважно, если это не так.

Как только параметры установлены для маршрута, параметры становятся частью маршрута., если этот маршрут имеет параметры для передачи параметров, но этот параметр не передается при переходе, это приведет к сбою перехода или на странице не будет содержимого.

Например: перейти к /router1/:id

    <router-link :to="{ name:'router1',params: { id: status}}" >正确</router-link>
    <router-link :to="{ name:'router1',params: { id2: status}}">错误</router-link>

2. Параметры также можно передавать, если params и query не заданы, но когда params не заданы, параметры обновления страницы или возврата будут потеряны, а с запросом этого не произойдет, как я уже упоминал выше.

Послесловие:

На этом статья заканчивается, пожалуйста, простите меня за плохое написание.

наконец: Если вам нужно перепечатать, пожалуйста, поставьте ссылку на оригинальный текст и подпишите его. Кодировать не просто,благодарныйслужба поддержки! Я пишу статью с менталитетом биржевых записей, и не хочу ее рвать, но приветствую подсказки. Тогда я надеюсь, что друзья, которые прочитают это, кликнутподобно, вы также можетеСфокусируйся наПроверить меня.
сайт блога and Персональная домашняя страница Nuggets

Выше 2017.11.12

Категории