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

推薦する

Docker で Spring-boot プロジェクトをデプロイするためのサンプル コード

1. 基本的な Spring-boot クイックスタート1.1 クイックスタート pom.xml は...

IE8互換表示(IE7モード)とスタンドアロンIE7の違いの詳細な説明

1つ。 IE8 互換表示の概要<br />新しいバージョンのブラウザが古い Web サイ...

ブラウザのスクロールバーのスタイルを変更するための純粋な CSS の例

CSSを使用してブラウザのスクロールバーのスタイルを変更する ::-webkit-スクロールバー{ ...

MySql ストレージ エンジンとインデックスに関する知識のまとめ

ストレージエンジンデータベース ストレージ エンジンとは何ですか?データベース エンジンは、データベ...

Vue3 の父子値転送に関する簡単な説明

目次父から息子へ: 1. 親コンポーネントのサブコンポーネントタグに、サブコンポーネントに渡されるデ...

JavaScript はモーダルボックスのドラッグ効果を実現します

これはモーダル ボックスのドラッグのケースです。ここで実装する関数は次のとおりです。 1. ポップア...

docker compose helloworld を使い始めるための詳細なプロセス

前提条件Compose は、Docker コンテナをオーケストレーションするためのツールです。Doc...

Dockerコンテナ同士を接続する3つの方法の詳しい説明

Docker コンテナ間の相互接続と通信には 3 つの方法があります。 Docker 内部ネットワー...

Linux サーバーのクイックアンインストールとノード環境のインストール (簡単に始められます)

1.まずnpmをアンインストールする sudo npm アンインストール npm -g 2. ノー...

HTML でのアンカータグの使用例の共有

アンカータグの使用法:同じドキュメント内の特定の場所にリンクすることをアンカー リンクと呼びます。ア...

MySQLに絵文字表現を保存する詳細な手順

原因: java.sql.SQLException: 列の文字列値が正しくありません: '\...

CSS スティッキーフッタークラシックレイアウトの実装

スティッキーフッターレイアウトとは何ですか?一般的な Web ページのレイアウトは、通常、ヘッダー部...

MacにMySQLデータベースをインストールする方法を教えます

Mac 用 MySQL をダウンロード: https://downloads.mysql.com/a...

Nginx ログのカスタマイズとログ バッファの有効化の詳細な説明

序文ウェブサイトのアクセス元をカウントしたい場合は、PHP を使用して情報を取得してデータベースに記...

知らないかもしれない奇妙で興味深いDockerコマンド

はじめに使えるかもしれないが、あまり使われていない、シンプルで実用的なDockerコマンドをいくつか...