Проблема с маршрутизацией Vue.js 2 и истории браузера - PullRequest
Новая
       6

Проблема с маршрутизацией Vue.js 2 и истории браузера

0 голосов

Столкнулся с такой проблемой - отправляю данные на реквизит тега / router-link /, когда нажимаю на ссылку, захожу в статью, получает данные, все работает. Что ж, если вы нажмете кнопку «назад» в браузере, а затем «вперед», статей не будет, будут пустые поля без данных. Как этого можно избежать?

Это ссылка на статью 

<h3 class="database-article__title">
    <router-link
        :to="{name : 'article',params: {
        id: item.id ,
        type:item.type ,
        name: item.name,
        text: item.text,
        author: item.author,
        isFavorite: item.isFavorite
    }}"> {{item.name}} </router-link>
</h3>

Маленькая часть article-template.vue 

<div class="content-type marketing">
    {{$route.params.type}}
</div>

<h3 class="database-article__title">
    {{$route.params.name}}
</h3>

<div class="database-article__text">
    {{$route.params.text}}
</div>

Еще раз, передача данных хороша, при нажатии на ссылку все отображается. Проблема в том, что при нажатии на кнопки в браузере «назад» и «вперед» - история браузера не сохраняется.

Кто-нибудь знает решение проблемы или где я могу прочитать, как ее решить?

Спасибо!

1 Ответ

0 голосов
/ 09 мая 2018

Я предполагаю, что ваш маршрут article не указывает ни одного из этих параметров в своем пути. При нажатии на ссылку vue-router запомнит объект params, указанный в <router-link>, и будет доступен через $route.params в компоненте article.

Однако, когда вы нажимаете кнопки браузера назад и затем вперед, переход к маршруту статьи не происходит, если щелкнуть <router-link>, как это было в первый раз, и поскольку эти параметры не были включены в путь маршрута, $route.params будет пустым.

Полагаю, вы просто пытаетесь передать данные с одного маршрута на другой. Если вы хотите, чтобы оно сохранялось при изменениях состояния истории (т. Е. Браузер назад / вперед), то либо:

  • Данные должны быть включены в URL, либо в виде параметров (например, /article/:id/:type и т. Д., Это должно быть указано заранее в пути маршрута), либо в строке запроса (например, /article?id=1&type=foo). Это не идеально для такой ситуации.
  • (Рекомендуется) Сохраните объект item таким образом, чтобы к нему можно было получить доступ любым маршрутом. Vuex - это один из способов, но это может быть излишним.

На самом деле ваши URL должны содержать только идентификатор статьи, например /article/1. Все остальные вещи, такие как тип / имя / и т. Д., Не входят в URL Из идентификатора вы сможете получить полный объект статьи либо из REST API (запрос XHR), либо получить его из некоторой абстракции хранилища данных в памяти (Vuex или чего-либо еще).

...