$router.принудительное обновление страницы и потеря данных

#vue.js #vue-router

#vue.js #vue-маршрутизатор

Вопрос:

У меня есть функция, которая вызывает.

  editTrade: function(tradeData) {
    //include index and/or get object from store
    //forward through router.
    this.$router.push({name: '/trading/newTrade', params: {tradeData}})

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

В строке URL указан правильный маршрут, но страница неверна. Я просмотрел документы, и вам следует использовать, name: если вы собираетесь отправлять параметры, я также пробовал, router.push как упомянуто в документе, но безрезультатно.

Ответ №1:

Ссылка на маршрут по его имени будет работать только тогда, когда маршрут назван. Убедитесь, что маршрут, на который вы ссылаетесь, имеет name параметр в определении маршрутов в объекте маршрутизатора Vue.

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

 this.$router.push({ path: `/trading/newTrade/${tradeData}` })

Ссылка на документацию

1. Я просмотрел хороший учебник, и мое имя было правильным, хотя оно выглядит как путь, это то, что у меня было в названии. Я все равно это исправил, чтобы использовать простую строку. Что касается объекта params, в вашем примере кода это не используется, так как же вы передаете данные в компонент? Я использую параметры.

2. @illcrx Как говорится в документации , при предоставлении path , params опция игнорируется. Вместо того, чтобы передавать параметры маршрута, я вставил их непосредственно в path, как вы можете видеть выше во фрагменте кода ответа. Обратите внимание, что параметры маршрута и реквизиты его компонента — это не одно и то же.

3. @illcrx Я думаю, я понимаю, что ты пытаешься сделать. tradeData переменная — это объект, верно? Если это так, вы не можете передать их через навигацию. Вы можете либо: а) определить идентификатор для данных ваших сделок и передать его как параметр маршрута, а затем в компоненте извлечь данные по их идентификатору; б) (менее красиво и я бы не рекомендовал это) упорядочить данные с помощью JSON.stringify функции и передать их как параметр маршрута, а затем получить упорядоченные данные и проанализировать их с помощью JSON.parse

Ответ №2:

У меня получилось, в моем случае я мог просто сделать это нажатием кнопки, что в любом случае было моим вариантом использования. b-button это VueBootstrap. Я изменил name на простую строку.

 <b-button
  class="cardButton"
  variant="secondary"
  //This is where the magic happens
  to="{ name: 'newTrade', params: {trade} }"
> Edit </b-button>

В компоненте

 created () {
        if (this.$route.params.trade){
          //You can use $route.params.trade to access trade.
          this.model = this.$route.params.trade;
        }