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 ファイル

推薦する

スライダー効果を実装するミニプログラム

この記事の例では、スライディングブロック効果を実現するための小さなプログラムの具体的なコードを参考ま...

方言変換のためのApache Calciteコード

意味Calcite は、Sql を SqlNode に解析し、次に SqlNode を特定のデータベ...

Docker初心者が初めてよく使うコマンドを試してみる練習記録

Docker を正式に使用する前に、まず Docker でよく使用されるコマンドに慣れておきましょう...

MySQL 8.0.16 Win10 zip バージョンのインストールと設定のグラフィック チュートリアル

この記事では、MySQL 8.0.16 Win10 zip版のインストールと設定のグラフィックチュー...

MySQL でスロークエリログを有効にする方法

1.1 はじめにスロークエリログを有効にすると、MySQL は指定された時間を超えるクエリステートメ...

Windows 10 で Hyper-V サービスをシャットダウンするいくつかの方法

VMware Workstation を使用して Windows 10 で仮想マシンを開くと、VMw...

vmware16 仮想マシンに共有フォルダを設定する方法

1. 仮想マシンに共有フォルダを設定します。 1. 処理する仮想マシンを選択し、右クリックして設定...

js のプロトタイプ、プロトタイプ オブジェクト、プロトタイプ チェーンの包括的な分析

目次プロトタイプを理解するプロトタイプオブジェクトを理解するインスタンスプロパティとプロトタイププロ...

HTML でマウスが停止したときに行全体の色 (tr) を変更する方法

純粋な CSS を使用して、マウスが行の上を通過するときに行の背景色を変更し、その行にフォーカスがあ...

Win10にmysql8.0.15 winx64をインストールしてサーバーに接続する際に問題が発生しました

1. mysql-8.0.15をダウンロード、インストール、設定する1. 公式サイト (https:...

Xampp サーバーで MySQL パスワードを変更する方法 (画像付き)

今日、PHP で作業しているときに、Xampp サーバーに付属の mysql データベースを使用する...

同じ日の最初の3つのデータを取得するためのMySQLタイムラインデータ

テーブルデータを作成する テーブル `praise_info` を作成します ( `id` bigi...

CSS の複雑なセレクターと CSS のフォントスタイルと色属性の詳細な説明

これまでに CSS の基本的なセレクターをいくつか学習しましたが、今日は CSS の複雑なセレクター...

MySQLで置換関数を実装するためのいくつかの実用的なシナリオ

REPLACE構文REPLACE(String,from_str,to_str)つまり、String...

Dockerを使用してSonarQubeをインストールする詳細なチュートリアル

目次1. イメージをプルする1.1 関連するイメージをプルして実行する1.1.1 関連する画像を取得...