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ファイルを実行するいくつかの方法

推薦する

Vue検証コードコンポーネントの使い方の詳しい説明

この記事の例では、vue検証コードコンポーネントで使用される具体的な実装コードを参考までに共有してい...

MySQL 4 の一般的なマスタースレーブレプリケーションアーキテクチャ

目次1つのマスターと複数のスレーブのレプリケーションアーキテクチャマルチレベルレプリケーションアーキ...

ハイパーリンクAタグを学ぶ

聞く: CSS を使用してハイパーリンクのスタイルを設定しましたが、ホバーしても機能しません。なぜこ...

Linux ディスク クォータ管理のグラフィカルな例

ディスク クォータは、コンピューター内の指定されたディスクのストレージ制限です。つまり、管理者はユー...

Linux での JDK のインストール (OpenJDK のアンインストールを含む) の概要

1. openjdkを表示する rpm -qa|grep jdk 2. openjdk を削除します...

Linux で fdisk を使用してディスクをパーティション分割する方法

Linux パーティションでよく使用されるコマンド: fdisk、MBR パーティション テーブルの...

JavaScript タイマーの詳細

目次1. 簡単な紹介2. 間隔を設定する2.1 説明2.2 パラメータ2.3 戻り値2.4 使用法3...

Docker 経由で Redis 6.x クラスターをデプロイする方法

システム環境: Redis バージョン: 6.0.8 Docker バージョン: 19.03.12シ...

CentOS 7 に MySQL 8 をインストールするための詳細なチュートリアル

準備するこの記事の環境情報: ソフトウェアバージョンセントOSセントOS7.4マイグレーション8.0...

ウェブページのCSSの優先順位について詳しく説明します

CSS の優先順位について話す前に、CSS とは何か、CSS が何に使用されるのかを理解する必要があ...

js 基本構文と Maven プロジェクト構成チュートリアル ケース

目次1. jsステートメント2番目、js配列3. js関数4. メイヴンV. 結論1. jsステート...

MySQL グリーン解凍バージョンのインストールと設定手順

手順: 1. MySQLデータベースをインストールする1. MySQL-5.6.17-winx64....

vscode で Prettier Code プラグインを使用する詳細なチュートリアル

なぜprettierを使うのですか?大企業では、フロントエンド開発コードに独自のコード標準がある場合...

モバイルデバイス上のぼやけた小さなアイコンの問題を解決する方法

序文以前、画像とテキストの垂直方向のずれの問題について説明しました。ここで示した小さな例では、小さな...