Vue プロジェクトで現在のページを更新するためのソリューションの紹介

この記事では、Vue プロジェクトの現在のページを更新するためのソリューションを紹介します。必要な方は参考にしていただければ幸いです。

シナリオ:

vue プロジェクト ページでいくつかの操作を実行し、ページを更新する必要がある場合があります。

発生した解決策と問題:

this.$router.go(0)。このメソッドのコードは非常に少なく、たった 1 行ですが、エクスペリエンスは非常に劣ります。ページにはしばらく白い画面が表示され、エクスペリエンスはあまり良くありません。

vue-router を使用して現在のページに再ルーティングすると、ページは更新されません。

location.reload()。これも同様で、画面が点滅し、エクスペリエンスがあまり良くありません。

推奨解決策:

provide/inject の組み合わせを使用する
原則: 祖先を許可するコンポーネントの階層がどれほど深くても、そのすべての子孫に依存関係が注入され、上流と下流の関係が確立されると常に有効になります。

App.vue で、reload メソッドを宣言して、 router-view の表示または非表示を切り替えて、ページのリロードを制御します。

<template>
  <p>
    <router-view></router-view>
  </p>
</template>

<script>
export default {
  name: &#39;App&#39;,
  provide () {
    return {
      reload: this.reload
    }
  },
  data () {
    return {
      isRouterAlive: true
    }
  },
  methods: {
    reload () {
      this.isRouterAlive = false
      this.$nextTick(function () {
        this.isRouterAlive = true
      })
    }
  }
}
</script>

更新する必要があるページ。ロジックが完了したら (削除または追加...)、App.vue コンポーネント (provide) によって提供される reload 依存関係をページに挿入します。直接 This.reload()呼び出して現在のページを更新します。

reload メソッドを挿入します

this.reload を直接呼び出します

以上がVue プロジェクトで現在のページを更新するためのソリューションの紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。