vue3中怎么刷新當前頁面

這篇“vue3中怎么刷新當前頁面”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“vue3中怎么刷新當前頁面”文章吧。

1.業務場景

一般我們在刪除或者編輯完表格數據的時候，會再次請求接口來刷新表格的數據。如果是同時有好幾個接口需要請求，那就不能再每個接口挨個去調了。我們需要使用一種比較友好的方式來實現了。

2.實現思路

第一種最直觀的就是直接刷新當前頁面，比如使location.reload和$router.go(0)方法。但是這種方式會導致頁面會有白屏情況，不友好。那么我們能不能刷新當前的vue組件呢？我們知道當vue的組件重新渲染以后它的整個生命周期會重新執行一遍，接口自然而然的也會重新請求一遍的。那么多如何刷新當前組件呢？首先是通過v-if來控制當前頁面組件的渲染。在有router-view渲染組件的情況下，我們直接把v-if加在router-view上面。然后通過控制這個判斷條件，比如我們就叫做isRouterAlive。

那么這個判斷條件如何控制呢？因為涉及到跨組件通信，所以需要使用provide/inject。在router-view組件中通過provide提供一個relaod方法，當刪除或者編輯完成表格數據以后，使用inject觸發reload方法。在reload方法里面我們來控制判斷條件。當realod的時候isRouterAlive=false,緊接著在nextTick中設置為true,這樣就可以實現組件重新加載了。

下面我們來看看代碼邏輯的實現。

3.代碼實現

首先修改router-view渲染組件

<template>
  <div class="main">
    <router-view v-if="isRouterAlive"></router-view>
  </div>
</template>

<script>
	export default {
    provide(){
        return {
            reload: this.reload
        }
    },
    data(){
        return {
            isRouterAlive: true
        }
    },
    methods: {
        reload(){
            this.isRouterAlive = false
            //通過this.$nextTick()產生一個微任務,在一次dom事件循環后,重新創建組件
            this.$nextTick(() => {
              this.isRouterAlive = true  
            })
        }
    }
  }
</script>

在table頁面，這樣實現：

<template>
  <div>
    首頁
    <button @click="handleSubmit">刷新</button>
  </div>
</template>

<script>
export default {
  //通過inject獲取祖先元素的reload方法
  inject: ['reload'],
  data() {
    return {
      isRouterAlive: true,
    }
  },
  methods: {
    handleSubmit() {
      // 假如這是一個編輯提交事件
      // 這里是編輯請求的各種邏輯和接口...
      // 編輯執行成功，就刷新當前頁面，請求reload
      this.reload()
    },
  },
}
</script>

以上就是關于“vue3中怎么刷新當前頁面”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。