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

推薦する

CentOs7 64 ビット MySQL 5.6.40 ソースコードのインストール プロセス

1. インストールプロセス中に問題が発生しないように、まず依存パッケージをインストールします。 [r...

JavaScriptにおけるこれの深い理解

Jsでのこれの深い理解JavaScriptスコープはstatic scopeスコープですが、 Jsの...

Linux でファイルをあいまい検索するのに適したコマンドは何ですか?

1. はじめにこの記事では、主に Linux システムでコマンドライン ツールを使用してファイルを...

mysql5.7.33 で誤って ibdata ファイルを削除した後にデータを回復する方法

目次1. シナリオの説明: 2. 事例のデモンストレーション: 2.1. MySQLの障害発生前にデ...

マインスイーパゲームを実装するための jQuery プラグイン (1)

この記事では、jQueryプラグインを使用したマインスイーパゲームの最初の記事の具体的なコードを参考...

Node.js を使用してパスワード ジェネレータを作成するための完全な手順

目次1. 準備2. コマンドラインの記述2.1 バージョンと説明を追加する2.2 パスワードの長さを...

MySQLクラスタのDockerデプロイメントの実装

シングルノードデータベースの欠点大規模なインターネットプログラムはユーザーベースが大きいため、アーキ...

dockerでredis5.0.3をインストールする方法

1. 公式5.0.3イメージを取得する [root@localhost ~]# docker pul...

CentOS7 で Jenkins+Maven+Git 継続的インテグレーション環境を構築する方法

この記事では、Spring boot + Maven プロジェクトのデプロイメントを例に、Code ...

Dockerfile を使用したカスタムイメージの構築の実装

目次序文Dockerfile の紹介Dockerfileはイメージプロセスを構築するDockerfi...

Docker で Tomcat、MySQL、Redis をインストールするための詳細な手順

目次DockerでTomcatをインストールするtomcatイメージを使用してコンテナを作成する(イ...

DockerでRedisを使用するための詳細な手順

1. はじめにこの記事では、Docker を使用して Redis を探索する方法を説明します。 Do...

HTMLテーブルではテーブルの外側の境界線のみが表示されます

質問があります。Dreamweaver で、3 行 1 列のログイン フォーム (ログイン、登録、パ...

Linuxの一般ユーザー向けスケジュールタスクの詳細な説明

序文通常のユーザーはcrontabスケジュールタスクを定義します。たとえば、Oracleユーザーはス...