Vueでのリフレッシュのいくつかの方法
1333 ワード
1.シーン
リストの処理では、データを削除したり、新しいデータを追加したりした後、現在のページを再リフレッシュする必要があることがよくあります.
2.問題
1.vue-routerで現在のページに再ルーティングし、ページはリフレッシュされません.
2.
3.解決方法
provide/inject組合せ
役割:1つの祖先コンポーネントがすべての子孫子孫に依存を注入することを許可します.コンポーネントの階層がどれだけ深くても、上下流関係が成立する時間内に常に有効になります.
app.vueに追加:
reloadが必要なページに追加:
リストの処理では、データを削除したり、新しいデータを追加したりした後、現在のページを再リフレッシュする必要があることがよくあります.
2.問題
1.vue-routerで現在のページに再ルーティングし、ページはリフレッシュされません.
2.
window.reload(),
またはrouter.go(0)
でリフレッシュした場合、ブラウザ全体が再ロードされ、点滅し、体験が悪い3.解決方法
provide/inject組合せ
役割:1つの祖先コンポーネントがすべての子孫子孫に依存を注入することを許可します.コンポーネントの階層がどれだけ深くても、上下流関係が成立する時間内に常に有効になります.
app.vueに追加:
export default {
provide () { // provide , inject 。
return {
reload: this.reload
}
},
data() {
return {
isRouterAlive : true
};
},
methods: {
reload () {
this.isRouterAlive = false; // ,
this.$nextTick(function () {
this.isRouterAlive = true; //
})
}
}
}
reloadが必要なページに追加:
inject:['reload'], // App reload
this.reload();