Как я могу вернуться/вернуться на vue-router?
Хорошо, чтобы объяснить это просто:
У меня 3x страницы.
- Страница 1 (Главная)
- Страница 2 (Меню)
- Page 3 (О)
Страница 1 имеет a-
<router-link to="/menu">
что при нажатии маршрутов на "/menu".
На данный момент, на странице 2 (Меню) есть
<router-link to="/">
и когда эта кнопка будет нажата, она вернется к предыдущему местоположению "/" Page 1 (Главная).
Но я не хочу создавать компонент для маршрутизатора для каждой страницы, чтобы "вернуться" на предыдущую страницу (как если бы у меня было 100 страниц, это может быть много работы по перенаправлению). Есть ли способ сделать это с помощью vue-router? аналогично window.history.back()
Любопытно посмотреть, есть ли способ сделать это, поскольку я не могу найти его в документах.
Заранее спасибо! Джон
Ответы
Ответ 1
Вы можете использовать Programmatic Navigation. Чтобы вернуться, вы используете это:
router.go(n)
Где n может быть положительным или отрицательным (вернуться). Это то же самое, что и history.back(). Таким образом, вы можете создать свой элемент следующим образом:
<a @click="$router.go(-1)">back</a>
Ответ 2
Если вы используете Vuex
вы можете использовать https://github.com/vuejs/vuex-router-sync
Просто инициализируйте его в своем основном файле с помощью:
import VuexRouterSync from 'vuex-router-sync';
VuexRouterSync.sync(store, router);
Каждое изменение маршрута будет обновлять объект состояния route
в Vuex
. Вы можете создать следующий getter
использовать from
объекта в состоянии маршрута или просто использовать state
(лучше использовать добытчик, но это другая история https://vuex.vuejs.org/en/getters.html), так что в общем он (внутренние методы/значения компонентов):
this.$store.state.route.from.fullPath
Вы также можете просто поместить его в компонент <router-link>
:
<router-link :to="{ path: $store.state.route.from.fullPath }">
Back
</router-link>
Поэтому, когда вы используете код выше, ссылка на предыдущий путь будет динамически генерироваться.