Vue.js router — не работают стрелки назад / вперёд в браузере. Как исправить?

Question

[EvgeniySaschenko]

Всем привет!

Разрабатываю сайт на Vue.js, столкнулся с проблемой - при попытке вернутся на предыдущую страницу стрелками назад / вперед в браузере - остаётся текущая страница (данные в компоненте не меняются).

Url в браузере меняется программно, при нажатии на кнопку выполняется такой код (При нажатии на кнопку меняется url и обновляются данные компонента):

this.$router.history.push(`/movie/uid/${chosenMovie.uid}`);

Как это можно исправить?

Answer 1

[Сергей delphinpro]

Вообще-то, vue-router сам всё делает. Ручные манипуляции с историей излишни.

Comments

[EvgeniySaschenko]

Мне нужно добавлять в историю новый url вручную т.к. человек переходит не по ссылке (я uid получаю только после того как человек уже нажал на кнопку)

[Сергей delphinpro]

EvgeniySaschenko, ладно. Но этот маршрут обрабатывается роутером? Вызывается какой-то компонент?

И еще, я сейчас быстро пробежался по документации для уточнения, и не нашел там свойства history у роутера. Оно вообще работает?
Для программной навигации используется метод push() самого объекта $router

this.$router.push({path: `/movie/uid/${chosenMovie.uid}`});

[EvgeniySaschenko]

Да, этот маршрут обрабатывается роутером, страница с этим компонентом первый раз вызывается когда пользователь переходит по ссылке с главной страницы.
Дальше, если пользователь нажимает на кнопку - меняется url и данные в компоненте (в качестве хранилища состояния используется Vuex).

С history работает, пробовал сделать без history - тоже работает, но на кнопки навигации в браузере не повлияло.

[Сергей delphinpro]

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

Пример есть в документации Продвинутые темы - Загрузка данных после перехода

[EvgeniySaschenko]

Сергей delphinpro, Пока решил оставить как есть. Спасибо за ответы!