Vueページをリフレッシュする3つの方法
私たちはプロジェクトを書くとき、ユーザーがアクションを実行し、いくつかの状態を変更し、ページを再リフレッシュしてページを再レンダリングする必要があることによく遭遇します.例えば、ユーザーのログイン成功、増加、削除、更新など.元の方法: vue固有のルーティングジャンプ:
使用したことのある人は、前の2つが強制的にページをリフレッシュし、短い点滅が発生し、ユーザー体験の効果が悪いことを知っています.3.まずAppに次のコードを書きます.
次に、ページをリフレッシュする必要があるコンポーネントに次のように書くことができます.
ページをリフレッシュするコードブロックで使用します.
location.reload();
this.$router.go(0);
使用したことのある人は、前の2つが強制的にページをリフレッシュし、短い点滅が発生し、ユーザー体験の効果が悪いことを知っています.3.まずAppに次のコードを書きます.
<template>
<div id="app">
<router-view v-if="isRouterAlive"></router-view>
</div>
</template>
<script>
export default {
name: 'App',
provide () { // provide , inject 。
return {
reload: this.reload
}
},
data() {
return{
isRouterAlive: true //
}
},
methods: {
reload () {
this.isRouterAlive = false; // ,
this.$nextTick(function () {
this.isRouterAlive = true; //
})
}
},
}
</script>
次に、ページをリフレッシュする必要があるコンポーネントに次のように書くことができます.
export default {
inject:['reload'], // App reload
data () {
return {
.......
}
},
ページをリフレッシュするコードブロックで使用します.
this.reload();