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

Docker を使用した Redis マスタースレーブレプリケーションの実践の詳細説明

ブログ

Linux の EXT シリーズファイルシステムフォーマットの詳細な説明

ブログ

MySQL SELECT文の実行方法

ブログ

Vueはリストのシームレスなスクロールを実装します

ブログ

近々ブラウザに導入される CSS :is() と :where() の簡単な分析

ブログ

Linux で rpm パッケージを見つけるために CD をマウントする方法

ブログ

axiosのシンプルなカプセル化と使用例コード

ブログ

SQL重複排除方法の概要

ブログ

Linux でディスク IO を表示し、読み取りと書き込みで高い IO を占有するプロセスを見つけます。

ブログ

ウェブサイトのコンテンツが検索エンジンに含まれないようにする方法

ブログ

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