Vueはページの部分的なリフレッシュを実装します(ルータビューのページリフレッシュ)

Vueはページの部分的なリフレッシュを実装します(ルータビューのページリフレッシュ)

Vue でprovide+inject組み合わせを使用する

まず、App.vue を変更する必要があります。

<テンプレート>
  <!-- 会社経営 -->
  <div class="companyManage">
    <ルータービュー v-if="isRouterAlive"></ルータービュー>
  </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  名前: "companyManage",
  時計: {}、
  提供する() {
    戻る {
      リロード:this.reload
    }
  },
  データ() {
    戻る {
      ルータが生きているかどうか:true
    };
  },
  メソッド: {
    リロード() {
      this.isRouterAlive = false;
      this.$nextTick( () => {
        this.isRouterAlive = true;
      })
    }
  },
  マウント() {}
};
</スクリプト>

<スタイルスコープ>
.companyManage{
  幅: 100%;
  高さ: 100%;
  位置: 相対的;
  背景: #fff;
}
</スタイル>

ここに画像の説明を挿入

2. 参照するために更新する必要があるページに移動し、inject を使用して参照の reload をインポートし、直接呼び出します。

ここに画像の説明を挿入

挿入:["リロード"],
これをリロードします。

ここに画像の説明を挿入

Vue の部分ページリフレッシュ (ルータービュー ページリフレッシュ) に関するこの記事はこれで終わりです。Vue ページの部分リフレッシュに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vueで部分リフレッシュを実装する例

<<:  Linux 環境に nginx をインストールするチュートリアル

>>:  MySQLコマンドラインでSQLファイルを実行するいくつかの方法

推薦する

MySQLのユーザーアカウント管理と権限管理の詳細な説明

序文MySQL の権限テーブルは、データベースの起動時にメモリにロードされます。ユーザーが ID 認...

Nginx 書き換えジャンプの適用シナリオの詳細な説明

アプリケーションシナリオ1: ドメイン名ベースのリダイレクト会社の古いドメイン名は www.accp...

Centos6.9 インストール Mysql5.7.18 ステップ記録

インストール手順 rpm -ivh mysql-コミュニティ-共通-5.7.18-1.el7.x86...

Vueの監視プロパティの詳細

目次1.watchは一般的なデータ(数値、文字列、ブール値)の変更を監視します。 1. 数値2. 文...

docker で PostgreSQL データベースをインストールして永続化する方法

Dockerのインストール手順をスキップする1. postgresqlイメージを取得する docke...

Docker ベースの MySQL マスタースレーブレプリケーション環境を構築するための実装手順

1. はじめに以前のプログラム アーキテクチャは次の形式になります。プログラムのサイズが大きくなると...

docker compose サービスの起動順序を制御する方法

まとめDocker-compose は複数の Docker コンテナ サービスを簡単に組み合わせるこ...

MySQL の悲観的ロックと楽観的ロックの使用例

悲観的ロック悲観的ロックは、データを悲観的であるとみなします。データをクエリするときに、ロックを追加...

Windows での MySQL 8.0.11 インストール チュートリアル

この記事は、WindowsでのMySQL 8.0.11のインストールチュートリアルを記録しています。...

Vue で jsx 構文を正しく使用する方法

目次序文仮想DOM仮想DOMとは仮想DOMの利点レンダリング関数とは何ですか? jsx Vue3 で...

WeChatミニプログラムでの仮想リストの実装例

目次序文分析する初期レンダリング方法初期最適化さらなる最適化方法2序文ほとんどのミニプログラムには、...

TS 数値区切り文字とより厳密なクラス属性チェックの詳細な説明

目次概要演算子の改良と正確なinstanceofよりスマートなオブジェクトリテラル推論固有のシンボル...

JavaScript におけるさまざまなバイナリオブジェクトの関係の詳細な説明

目次序文さまざまなオブジェクト間の関係配列バッファ型付き配列Uint8ClampedArray文字間...

Linuxはシェルスクリプトを使用して履歴ログファイルを定期的に削除します

1. ツールディレクトリのファイル構造 [root@www tools]# ツリーツール/ ツール/...