聊聊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: [&#39;reload&#39;],
  data() {
    return {
      isRouterAlive: true,
    }
  },
  methods: {
    handleSubmit() {
      // 假如这是一个编辑提交事件
      // 这里是编辑请求的各种逻辑和接口...
      // 编辑执行成功，就刷新当前页面，请求reload
      this.reload()
    },
  },
}
</script>

透過這樣的方式，不會出現頁面空白,網址列會不會出現快速切換的過程,使用者體驗很友善。

推薦學習：《vue影片教學》

以上是聊聊vue3中如何刷新目前頁面的詳細內容。更多資訊請關注PHP中文網其他相關文章！