這篇文章給大家分享的是有關(guān)vue實(shí)現(xiàn)無(wú)痕刷新的方法的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧。

站在用戶(hù)的角度思考問(wèn)題，與客戶(hù)深入溝通，找到無(wú)為網(wǎng)站設(shè)計(jì)與無(wú)為網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶(hù)體驗(yàn)好的作品，建站類(lèi)型包括：成都網(wǎng)站建設(shè)、網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、主機(jī)域名、網(wǎng)頁(yè)空間、企業(yè)郵箱。業(yè)務(wù)覆蓋無(wú)為地區(qū)。

最近遇到一個(gè)需求，需要刷新當(dāng)前頁(yè)面來(lái)更新數(shù)據(jù)，網(wǎng)上找了很多方法，在這里做個(gè)總結(jié)。

這里主要記錄三種方法，分別是：強(qiáng)制刷新、偽造刷新、無(wú)痕刷新。

強(qiáng)制刷新

window.location.reload()，原生 js 提供的方法；

this.$router.go(0)，vue 路由里面的一種方法；

這兩種方法都可以達(dá)到頁(yè)面刷新的目的，簡(jiǎn)單粗暴，但是用戶(hù)體驗(yàn)不好，相當(dāng)于按 F5 刷新頁(yè)面，頁(yè)面的重新載入，會(huì)有短暫的白屏。

偽造刷新

通過(guò)路由跳轉(zhuǎn)的方法刷新，具體思路是點(diǎn)擊按鈕跳轉(zhuǎn)一個(gè)空白頁(yè)，然后再馬上跳回來(lái)

// index.vue 首頁(yè)
this.$router.replace('/empty')

// empty.vue 空白頁(yè)
created() {
    this.$router.replace('/')
}

當(dāng)點(diǎn)擊刷新按鈕時(shí)地址欄會(huì)有快速的地址切換過(guò)程

無(wú)痕刷新

先在全局組件注冊(cè)一個(gè)方法，用該方法控制 router-view 的顯示與否，然后在子組件調(diào)用；

用 v-if 控制 的顯示；

provide：全局注冊(cè)方法；

inject：子組件引用 provide 注冊(cè)的方法；

App.vue：

當(dāng)前組件：

當(dāng)點(diǎn)擊按鈕時(shí)所有頁(yè)面重新渲染，體驗(yàn)最好

感謝各位的閱讀！關(guān)于vue實(shí)現(xiàn)無(wú)痕刷新的方法就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

網(wǎng)頁(yè)標(biāo)題：vue實(shí)現(xiàn)無(wú)痕刷新的方法-創(chuàng)新互聯(lián)
文章URL：http://weahome.cn/article/gpsji.html