Vue ルーティング this.route.push ジャンプ ページが更新されない場合の解決策

Vue ルーティング this.route.push ジャンプ ページが更新されない場合の解決策

Vue ルーティング this.route.push ジャンプ ページが更新されない

1. 背景

概要: Vue プロジェクトの開発において、ルーティングを使用してページにジャンプすると、ルーティングのジャンプ先のページが更新されません。

つまり、vue ライフサイクル関数は実行されません (作成、マウントされたフック関数)。

例:

ページA:

ページ B:

質問:

最初にページ A のボタンをクリックしてページ B に移動すると、すべて正常です。ページ A に戻ってボタンをもう一度クリックすると、ページ B はマウントされたフック関数を実行せず、マウントされた関数内のクエリ メソッドが実行されません。

2. 解決策:

1. Mounted:{} 関数の代わりに activated:{} 周期関数を使用します。

2. ルートの監視

// 推奨されません。ユーザーエクスペリエンスが悪いため、watch: {
	'$route' (to、from) {
    // ルートが変更されるとページが更新されます this.$router.go(0);
		}
},
// このメソッドはもう一度ウォッチを要求します: {
	'$route' (to、from) {
    // マウントされた関数内で実行されるメソッドをここに記述します。this.qBankId = globalVariable.questionBankId;
	this.qBankName = globalVariable.questionBankTitle;
	this.searchCharpter();
	}
},

Vue this.$router.push ルートジャンプ、リフレッシュパラメータが消える

this.$router.push({name:"",params:{id:""}})

リフレッシュパラメータが一致すると、名前とパラメータは消えます

this.$router.push({path:"",query:{id:""}})

パスとクエリは一緒に使用されます。ページを更新してもパラメータは消えません。クエリ内のパラメータは URL の一部になります。

上記は私の個人的な経験です。参考になれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Vue クリックボタンルートを実装して指定ページにジャンプする方法
  • vueはページにジャンプし、新しいウィンドウを開き、パラメータを渡して受け取ります。
  • Vueジャンプページの4つの一般的な方法と違いのまとめ
  • Vueプロジェクトでページジャンプを実装する方法
  • Vue はトークンの有効期限が切れると自動的にログインページにジャンプする機能を実装します
  • vuexを使用してページにジャンプする方法
  • Vueはこのプロジェクトのページ間のジャンプをどのように実現するのか

<<:  Ubuntuデュアルシステムが起動時に停止する問題の解決方法の詳細な説明

>>:  Navicat for MySql ビジュアルインポート CSV ファイル

推薦する

htmlはハイパーリンク付きの新しいウィンドウを開き、ウィンドウのプロパティを制御できます。

1. HTMLハイパーリンクによって開かれるウィンドウのサイズコードをコピーコードは次のとおりです...

Web でよく使われるフォントの紹介 (iOS および Android ブラウザでサポートされているフォント)

年末なので仕事も少なくなっています。私が何もせずにいるのを見ると、上司はきっと不快に思うでしょう。そ...

MySQL ページングクエリ最適化テクニック

ページング クエリを使用するアプリケーションでは、LIMIT と OFFSET を含むクエリが非常に...

シングルサインオン制御を実装するためのVueの完全なコード

参考までに、Vue シングル サインオンのデモをご紹介します。詳細を知りたい方のお役に立てれば幸いで...

CentOS7にPostgreSQL11をインストールする方法

CentOS 7にPostgreSQL 11をインストールする PostgreSQL: 世界で最も先...

Vue で pdfjs を使用して PDF ファイルをプレビューする方法

目次序文考えるライブラリディレクトリの解析とダウンロード使い方ファイルの場所実際の通話質問要約する序...

MySQL シャーディングの詳細

1. ビジネスシナリオの紹介MySQLを使用する電子商取引システムがあるとします。大量のデータを保存...

有名ウェブサイトのロゴにおすすめのフォント40選

世界で最も有名なウェブサイトのロゴデザインにはどんなフォントが使われているかご存知ですか?これらのフ...

雨滴効果を実現する JavaScript キャンバス

この記事では、雨滴効果を実現するためのJavaScriptキャンバスの具体的なコードを参考までに紹介...

(MariaDB) MySQL のデータ型とストレージメカニズムの包括的な説明

1.1 データ型の概要データ型は、各フィールドに保存できるデータの種類、保存できるデータの量、保存で...

モバイルレイアウトにvw+remを使用する方法

まだ rem フレキシブルレイアウトを使用していますか?圧縮された js コードの大きなセクションを...

Elementのメッセージポップアップウィンドウが繰り返しポップアップする問題の解決

目次1. 使用2. メッセージポップアップウィンドウが繰り返し表示される問題を解決する1. 使用Vu...

MySQL 最適化のヒント: 重複削除の実装方法の分析 [数百万のデータ]

この記事では、MySQL 最適化のヒントで重複したエントリを削除する方法を例を使って説明します。ご参...

phpmyadmin を使用して MySQL 権限を設定する方法

目次ステップ 1: root ユーザーとしてログインします。ステップ 2: 新しいデータ テーブルを...

CSSは高さを設定せずにdivを完全に中央に配置することを実現します

必要とする本文の下のdivは垂直方向に中央揃えになっていますdiv 内のテキストを垂直中央に配置する...