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

推薦する

JS での矢印関数と this の記述と理解

目次序文1. JSで関数を書く方法1. 通常の関数の書き方2. 矢印関数の書き方2. 通常の関数でこ...

パズル効果を実現するネイティブ js

この記事では、パズル効果を実現するためのネイティブjsの具体的なコードを参考までに共有します。具体的...

Windows での Apache+Tomcat7 負荷分散構成方法の詳細な説明

準備Windows Server 2008 R2 Enterprise (2.40GH、8GB、64...

MySQL クエリ ステートメントのプロセスと EXPLAIN ステートメントの基本概念とその最適化

ウェブサイトやサービスのパフォーマンスは、データベースの設計(適切な言語開発フレームワークを選択した...

Vueは書籍ショッピングカートの機能を実現

この記事の例では、書籍ショッピングカート機能を実現するためのVueの具体的なコードを参考までに共有し...

練習と面接のための Linux シェル スクリプトのヒント 9 つを共有する

予防1) 先頭にインタープリターを追加します: #!/bin/bash 2) 構文のインデントに 4...

SQLで同じフィールドの異なる値のデータ統計を実行する

適用シナリオ: シールのさまざまな状態に応じて、さまざまな状態のシールの数をカウントする必要がありま...

Layuiはログインインターフェース検証コードを実装します

この記事の例では、ログインインターフェース検証コードを実装するためのlayuiの具体的なコードを参考...

Windows に MySQL をインストールする方法のグラフィック チュートリアル

概要: この記事では主に、Windows 環境に MySQL をインストールする方法について説明しま...

左右の幅を固定し、中央の幅を適応させたHTMLレイアウトのソリューションの詳細な説明

この記事では、次のように、誰にでも共有できる左右幅固定のミドルアダプティブ HTML レイアウトソリ...

WEB 標準ウェブページ構造

背景画像でも、ページ上のテキストサイズでも、1 ピクセルの違いは非常に明白です。そして、私は学生時代...

mysql インストーラ コミュニティ 8.0.12.0 インストール グラフィック チュートリアル

このチュートリアルでは、参考のためにmysqlインストーラコミュニティ8.0.12.0のインストール...

CSSを使用してファイルアップロードパターンを描画する

以下に示すように、あなたならどのようにそれを達成しますか: 通常、フォントアイコンを使用して中央にプ...

Dockerのオンラインおよびオフラインインストールと一般的なコマンド操作

1. テスト環境名前バージョンセント7.6ドッカー18.09.06 2. オンラインインストールここ...

vue3.0共通コンポーネントの自動インポート方法の例

1. 前提条件インポートには require.context メソッドを使用します。vite で作成...