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 をよろしくお願いいたします。

以下もご興味があるかもしれません: