この記事では、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: 'App', 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 サイトの他の関連記事を参照してください。