Vueブラウザが監視を再開するための具体的な手順

序文

ページを共有するときに、ブラウザの戻るボタンをクリックしてプロジェクトのホームページに戻り、訪問回数を増やすことを期待します。

ブラウザの戻るボタンを監視し、デフォルトのイベントを防止する必要があります。

具体的な手順は次のとおりです。

1. マウントが完了したら、ブラウザがpopstateをサポートしているかどうかを確認します。

マウントされた(){
 window.history と window.history.pushState の場合 {
 history.pushState(null, null, ドキュメント.URL);
 window.addEventListener('popstate', this.goBack, false);
 }
},

2. ページが破棄されたら監視を解除します。それ以外の場合は、他のvueルーティングページも監視されます。

破壊された()
 window.removeEventListener('popstate', this.goBack, false);
},

3. 監視操作をメソッドに記述します。監視を解除するremoveEventListenerの内容は、監視を開始する内容と一致している必要があるため、その機能はメソッドに記述されます。

方法:{
 戻る(){
 this.$router.replace({path: '/'});
 //replace は、無限ループに陥るのを避けるために元のルートを置き換えます}
}

P.S. popstate は何に使用されますか?

popstateの使い方は？

新しい HTML5 API は window.history を拡張して、履歴ポイントをよりオープンにします。現在の履歴ポイント pushState を保存し、現在の履歴ポイント replaceState を置き換え、履歴ポイント popstate をリッスンすることができます。

pushState と replaceState の使用方法は似ています。

方向：

history.pushState(データ、タイトル、URL);
// 最初のパラメータ data は state の値です。2 番目のパラメータ title はページのタイトルですが、現在のすべてのブラウザはこのパラメータを無視するため、空の文字列を渡します。3 番目のパラメータ url は、移動先のリンクです。

replaceState の使用方法も同様です。たとえば、 history.replaceState("首頁","",location.href+ "#news");

要約する

これで、vue ブラウザ リターン モニタリングに関するこの記事は終了です。vue ブラウザ リターン モニタリングに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。