vue3中怎么刷新當(dāng)前頁面

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

1.業(yè)務(wù)場景

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

2.實(shí)現(xiàn)思路

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

那么這個判斷條件如何控制呢？因?yàn)樯婕暗娇缃M件通信，所以需要使用provide/inject。在router-view組件中通過provide提供一個relaod方法，當(dāng)刪除或者編輯完成表格數(shù)據(jù)以后，使用inject觸發(fā)reload方法。在reload方法里面我們來控制判斷條件。當(dāng)realod的時候isRouterAlive=false,緊接著在nextTick中設(shè)置為true,這樣就可以實(shí)現(xiàn)組件重新加載了。

下面我們來看看代碼邏輯的實(shí)現(xiàn)。

3.代碼實(shí)現(xiàn)

首先修改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()產(chǎn)生一個微任務(wù),在一次dom事件循環(huán)后,重新創(chuàng)建組件
            this.$nextTick(() => {
              this.isRouterAlive = true  
            })
        }
    }
  }
</script>

在table頁面，這樣實(shí)現(xiàn)：

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

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

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