Vue刪除數據成功后如何刷新表格數據

刷新表格數據的方法：

1、this.$router.go(0)
2、location.reload()
3、跳轉空白頁再跳回原頁面
4、控制的顯示隱藏(最實用的方法)

刷新表格數據的方法：
1、this.$router.go(0)
這種方法頁面會一瞬間的白屏，體驗不是很好，雖然只是一行代碼的事

2、location.reload()
這種也是一樣，畫面一閃，效果總不是很好

3、跳轉空白頁再跳回原頁面
在需要頁面刷新的地方寫上：this.$router.push(’/emptyPage’)，跳轉到一個空白頁。在emptyPage.vue里beforeRouteEnter 鈎子里控制頁面跳轉，從而達到刷新的效果

beforeRouteEnter (to, from, next) {
next(vm => {
vm.$router.replace(from.path)
})
}

這種畫面雖不會一閃，但是能看見路由快速變化

4、控制的顯示隱藏(最實用的方法)
在App.vue中寫如下代碼

template>
<div id="app">
<router-view v-if="isShow"></router-view>
</div>
</template>

<script>
export default {
name: 'App',
provide () {
return {
reload: this.reload
}
},
data () {
return {
isShow: true
}
},
methods: {
reload () {
this.isShow= false
this.$nextTick(function () {
this.isShow= true
})
}
}

}
</script>

 

然后在需要刷新的頁面引入依賴：inject: [‘reload’],

在需要執行的地方直接調用方法即可：this.reload()

 

————————————————
版權聲明：本文為CSDN博主「星空浩盪」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/weixin_45139342/article/details/107976362