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

創(chuàng)新互聯(lián)公司是創(chuàng)新、創(chuàng)意、研發(fā)型一體的綜合型網(wǎng)站建設公司，自成立以來公司不斷探索創(chuàng)新，始終堅持為客戶提供滿意周到的服務，在本地打下了良好的口碑，在過去的十載時間我們累計服務了上千家以及全國政企客戶，如人造霧等企業(yè)單位，完善的項目管理流程，嚴格把控項目進度與質(zhì)量監(jiān)控加上過硬的技術實力獲得客戶的一致贊譽。

1.業(yè)務場景

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

2.實現(xiàn)思路

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

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

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

3.代碼實現(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)生一個微任務,在一次dom事件循環(huán)后,重新創(chuàng)建組件
           this.$nextTick(() => {
             this.isRouterAlive = true  
           })
       }
   }
 }
</script>

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

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

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

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

本文題目：vue3中怎么刷新當前頁面
文章源于：http://www.aaarwkj.com/article48/igepep.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站維護、網(wǎng)站內(nèi)鏈、網(wǎng)站排名、微信公眾號、網(wǎng)站導航、營銷型網(wǎng)站建設

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)