web-dev-qa-db-ja.com

vue-routerで戻る/ルートバックするにはどうすればよいですか？

わかりました、これを簡単に説明するには：

3xページあります。

  • ページ1（ホーム）
  • ページ2（メニュー）
  • ページ3（概要）

ページ1には-

<router-link  to="/menu">

クリックすると「/ menu」へのルートが表示されるボタン。

今のところ、ページ2（メニュー）には

<router-link  to="/">

ボタンをクリックし、このボタンをクリックすると、前の場所「/」ページ1（ホーム）に戻ります。

しかし、前のページに「戻る」ために各ページのルーター用のコンポーネントを作成したくありません（まるで100ページあるかのように、これは多くの作業を戻すことができます）。 vue-routerでこれを行う方法はありますか？ window.history.back（）と同様

ドキュメントで見つけることができないため、これを行う方法があるかどうかを知りたいです。

前もって感謝します！ジョン

javascriptwebpackvue.jsvuejs2vue-router
36
John107

Programmatic Navigation を使用できます。戻るには、これを使用します。

router.go(n)

ここで、nは正または負（戻る）になります。これはhistory.back（）と同じです。したがって、次のような要素を持つことができます。

<a @click="$router.go(-1)">back</a>
110
José Fernando Davila

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>

したがって、上記のコードを使用すると、以前のパスへのリンクが動的に生成されます。

1
ojczeo