Vueはページを更新するために3つの方法を使用する

Vueはページを更新するために3つの方法を使用する

プロジェクトを作成しているときに、ユーザーがアクションを実行し、特定の状態を変更し、ページを更新してページを再レンダリングする必要がある状況に遭遇することがよくあります。例: ユーザーのログイン成功、追加、削除、更新など。

  • オリジナルの方法:
場所を再読み込みします。
  • Vue の組み込みルーティングジャンプ:
this.$router.go(0);

これを使用したことがある人なら誰でも、最初の 2 つはページを強制的に更新し、一瞬のちらつきとユーザー エクスペリエンスの低下を引き起こすことを知っています。
そこで、3 番目の方法を選択します。

  • まず、アプリに次のコードを記述します。
<テンプレート>
    <div id="アプリ">
    	<ルータービュー v-if="isRouterAlive"></ルータービュー>
	</div>
</テンプレート>
<スクリプト>
    エクスポートデフォルト{
        名前: 'アプリ'、
        provide () { //親コンポーネントに変数を提供し、inject を通じて子コンポーネントに変数を注入します。                                             
            戻る {
                リロード: this.reload                                              
            }
        },
        データ() {
            戻る {
                isRouterAlive: true //ビューが表示されるかどうかを制御する変数}
        },
        メソッド: {
            リロード(){
                this.isRouterAlive = false; //まず閉じます。
                this.$nextTick(関数() {
                    this.isRouterAlive = true; // もう一度開く}) 
            }
        },
    }
</スクリプト>

次に、ページを更新する必要があるコンポーネントにこれを記述します。

エクスポートデフォルト{
    inject:['reload'], //App data () に reload メソッドを挿入します {
        戻る {
    	.......
        }
    },

ページを更新する必要があるコード ブロックで使用します。

これで、Vue のページ更新の 3 つの方法についての記事は終了です。Vue のページ更新に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vueリストデータを削除した後、ページを自動的に更新する方法と更新方法の詳細な説明
  • Vue ルーターにパラメータを渡すときにページを更新するとパラメータが失われる問題に対処する方法
  • Vueルーターはパラメータを渡し、ページを更新するときにパラメータが失われる問題を解決します
  • Vueはルートの変更を監視し、App.vueファイル内のページを更新します。
  • Vueがページを更新した後にストアデータが失われる問題を解決する

<<:  MySQL: MySQL 関数

>>:  Spring環境を構成するためのDocker-composeの手順

推薦する

ボタンをクリックして画像を切り替える JavaScript

この記事の例では、ボタンをクリックすることで画像を切り替えることを実現するJavaScriptの具体...

Linux で履歴レコードを表示し、タイムスタンプを追加するためのヒント

Linux で履歴レコードを表示し、タイムスタンプを追加するためのヒントbashに詳しい人なら、hi...

Tomcat をアンインストールして再インストールする方法 (画像とテキスト付き)

tomcat9をアンインストールする1. Tomcatのインストールはディレクトリに解凍するだけで...

MySQL でパーティション分割後にクエリを実装するために MRG_MyISAM (MERGE) を使用する例

大量のデータベース データを最適化することは非常に高度な科学であり、開発者が習得する必要がある専門的...

CSS を使用してデータ ホットスポット効果を実現する方法

効果は以下のとおりです。 分析する1. ここでは、点を囲む 3 つの円がズームアニメーションを実行し...

Docker コンテナのマウントディレクトリ操作の表示

Dockerコンテナのマウントディレクトリ情報のみを表示する docker 検査 --format ...

CSS アニメーション プロパティの使用方法とサンプル コード (transition/transform/animation)

開発中、優れたユーザー インターフェイスには常にいくつかのアニメーションが組み込まれます。 CSS ...

Ubuntu 上の MySQL における中国語文字化け問題の解決方法

問題を見つける最近 Django を学習しているのですが、MySQL データと組み合わせてデータを挿...

CSSは高度に適応したフルスクリーンを実現します

独自のデモを作成するときに、display:flex を使用して垂直方向の中央揃えを実現したいと思い...

JavaScriptはオブジェクトの不要なプロパティを削除します

目次例方法1: 削除方法2: 分解補充する要約するThinking シリーズは、10 分で実用的なプ...

Windows での mysql-5.7.28 のダウンロード、インストール、および構成に関する詳細なグラフィックとテキストのチュートリアル

最近MySQLデータベースのバージョンを変更する必要があり、それを記録するために記事を書きます1. ...

HTML 基本コントロール入門_PowerNode Java アカデミー

<input> タグ<input> タグはユーザー情報を収集するために使用さ...

Vue モバイル開発で better-scroll を使用するときにクリック イベントが失敗する問題の解決策

最近、モバイル プロジェクトの開発方法を学ぶために vue を使用し、スクロールには better-...

ZabbixはPSK共有キーを使用してサーバーとエージェント間の通信を暗号化します。

Zabbix バージョン 3.0 以降、Zabbix サーバー、Zabbix プロキシ、Zabbi...