Как я могу вернуться/вернуться на 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>

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