文章目錄

• 刷新表格數據的方法：
• • 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= falsethis.$nextTick(function () {this.isShow= true})}}} </script>

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

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

總結

以上是生活随笔為你收集整理的Vue删除数据成功后如何刷新表格数据的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。