web-dev-qa-db-ja.com

履歴に追加せずにvue-routerにプッシュする方法は？

次のシーケンスが発生しています。

  • メインスクリーン

  • ロード画面

  • 結果画面

ホームページで、誰かがボタンをクリックすると、私はそれらをロード画面に送ります：

this.$router.Push({path: "/loading"});

そして、タスクが完了すると、それらは結果画面に送信されます。

this.$router.Push({path: "/results/xxxx"});

問題は、通常、結果からメイン画面に戻りたいが、クリックすると再びロードに送られ、結果に戻るため、無限ループに陥ってしまい、アクセスできないメイン画面に戻ります。

これを修正する方法はありますか？私は理想的には次のようなオプションがあったらいいのに：

this.$router.Push({path: "/loading", addToHistory: false});

履歴に追加せずにルートに送ります。

javascriptvue.jsvue-router
12
Click Upvote

これは、ルーターのbeforeEachフックを使用して行うことができます。

あなたがする必要があるのは、データがロードされたときに（loadingコンポーネントにリダイレクトする前に）変数をグローバルにまたはlocalStorageのresultsコンポーネントに保存する必要があることです。

export default {
  name: "results",
  ...
  importantTask() {
    // do the important work...
    localStorage.setItem('DATA_LOADED', JSON.stringify(true));
    this.$router.Push({path: "/results/xxxx"});
  }
}

そして、beforeEachフックでこの変数を確認し、正しいコンポーネントにスキップする必要があります。

// router.js...
router.beforeEach((to, from, next) => {
  const dataLoaded = JSON.parse(localStorage.getItem('DATA_LOADED'));
  if (to.name === "loading" && dataLoaded)
  {
    if (from.name === "results")
    {
      next({ name: "main"} );
    }
    if (from.name === "main")
    {
      next({ name: "results"} );
    }
  }
  next();
});

また、クエリボタンがクリックされたとき（mainコンポーネントにルーティングする前に）、loadingコンポーネントの値をfalseにリセットすることを忘れないでください。

export default {
  name: "main",
  ...
  queryButtonClicked() {
    localStorage.setItem('DATA_LOADED', JSON.stringify(false));
    this.$router.Push({path: "/loading"});
  }
}
0
Yogesh

ロード画面は、vue-routerによってまったく制御されるべきではありません。最良のオプションは、javascriptによって制御される、ローディング画面にモーダル/オーバーレイを使用することです。 Vueの周りには多くの例があります。何も見つからない場合は、vue-bootstrapに実装する簡単な例がいくつかあります。

0
omarjebari