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 で入力プロンプトのテキスト スタイルを変更するためのサンプル コード

多くのウェブサイトでは、入力ボックスにヒントテキストが表示されています。入力ボックスにヒントテキスト...

Vue プロジェクトでよく使用されるツール機能の概要

目次序文1. カスタムフォーカスコマンド1. 方法1 2. 方法2 3. 方法3 2. 入力ボックス...

Windows Server 2016 リモート デスクトップ サービスの構成とライセンスのアクティブ化 (2 ユーザー)

Server 2016 のリモート デスクトップ接続のデフォルト数は 2 ユーザーです。2 人以上...

今日、私は非常に奇妙なクリックの問題に遭遇し、自分で解決しました

...こんな感じで、今日はポップアップウィンドウを作ろうと思ったのですが、バックエンド PHP によ...

曇り空のアイコン効果を実現する純粋な CSS

効果効果は以下のとおりです​実装のアイデアbox-shadow プロパティを使用して、複数の灰色の円...

ストリーマーボタンの効果を実現するCSS3アニメーション

CSS3 を学習する過程で、CSS3 属性を使用すると多くのクールな効果を簡単に実現できることが分か...

Win10環境にMysql5.7.23をインストールする際の問題点と落とし穴

たくさんのチュートリアルを読みましたが、うまくインストールできませんでした。しばらく試行錯誤した後、...

node.js で EventEmitter をカスタマイズする方法

目次序文1. 何ですか2. Node.jsでEventEmitterを使用する方法3. 実施プロセス...

JSは画像の滝の流れの効果を実現します

この記事では、画像ウォーターフォールフローを実現するためのJSの具体的なコードを参考までに共有します...

mysql インストーラ ウェブ コミュニティ 5.7.21.0.msi インストール グラフィック チュートリアル

この記事の例では、Androidの9グリッド画像を表示するための具体的なコードを参考までに共有してい...

Docker の Windows ストレージ パス設定操作

Windows 10 に Docker をインストールする場合、コンテナタイプを Linux コンテ...

CSS3 を使用して入力複数選択ボックスのスタイルをカスタマイズする例

原則: まず入力要素を非表示にし、次に CSS を使用してラベル要素のスタイルを設定します (他の要...

Docker可視化管理ツールであるDocker UIの使用

1. DockerUIの紹介DockerUI は Docker API をベースとしており、Dock...

Mysql一時テーブルの原理と作成方法の分析

この記事は主にMysql一時テーブルの原理と作成方法を紹介します。この記事のサンプルコードは非常に詳...

JavaScriptはeコマースプラットフォームの製品詳細を実装します

この記事では、電子商取引プラットフォームで商品の詳細を表示する一般的な例を紹介します。たとえば、ある...