Vue使用時にブラウザバック時にbeforeRouteLeaveが発動できない問題

この記事では、Vue ブラウザーが戻るときに beforeRouteLeave をトリガーできない問題の解決策を主に紹介します。必要な方は、最初のコンポーネントをロードする

現象を参照してください (ここでの最初の意味は、ブラウザ履歴) 最初のもの (以下、監視対象コンポーネントと呼びます) は、他のページへの通常のジャンプが beforeRouteLeave によってトリガーされます。 ただし、ブラウザの戻るボタンを押した場合、このイベントはリッスンできません。

ソリューション

現在、比較的粗雑で非実用的なソリューションを使用しています。コンポーネントのレイヤーを追加し、監視対象のコンポーネントに router.push を追加します。これにより、監視対象のコンポーネントが最初のコンポーネントではなく、beforeRouteLeave イベントを通常どおりリッスンできるようになります。

注:

元のルーティングが中断されるため。 main.js にグローバル ルート監視を追加する必要があります

router.beforeEach((to, from, next) => {
 if (to is '用于跳转的组件' && from is '待监听组件') {
  router.go(-1) 
  next(false)
 } else {
  next()
 }
 // 这样当从一个普通页面A进入待监听组件时，在待监听组件中按返回键时能正常进入A
})

以上は、皆さんのためにまとめたものです。今後皆さんのお役に立てれば幸いです。

関連記事:

JavaScript関連の裏技

webpackにファイルを動的にインポートする実装

WeChatアプレットに円形のプログレスバーを実装する方法

webpackでiconfontを使用する方法フォントアイコン

指定したJSファイルをwebpackに個別にパッケージ化する方法

vueモバイルターミナルに日付選択コンポーネントを実装する

ノードを使用して組み込みデバッグを実装する

webpackのパッケージ化されたファイルを反応させる(詳細なチュートリアル)

JavaScript の 6 つの正規表現 (詳細なチュートリアル)

JavaScript でデフォルトのアバターを入力する方法

大きすぎる Bundle.js ファイルの問題を処理するには webpack を使用します

自動Douyin の赤い封筒取得機能

vue-cli で Babel 設定ファイルを設定する方法

Babel のインストールと設定チュートリアルの使い方

以上がVue使用時にブラウザバック時にbeforeRouteLeaveが発動できない問題の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。