Vue實(shí)現(xiàn)當(dāng)前頁(yè)面刷新的4種方法舉例
前言
這兩周在寫一個(gè)后臺(tái)管理，每次調(diào)用接口實(shí)現(xiàn)增刪改查的過程中，都需要刷新當(dāng)前頁(yè)面或者刷新數(shù)據(jù)。如果手動(dòng)點(diǎn)擊瀏覽器的小圈圈不僅麻煩、用戶體驗(yàn)感極差，而且不會(huì)真的有人讓用戶手動(dòng)刷新叭。。。這個(gè)問題可以稱得上是前端的bug了。那么，順著這個(gè)問題，一通搜尋下來，整理了幾個(gè)刷新當(dāng)前頁(yè)面的方法，如下：
方法一：location.reload
學(xué)習(xí)JS的過程中，大家應(yīng)該都了解過Browser 對(duì)象，其中Location 對(duì)象是 window 對(duì)象的一部分。Location 對(duì)象中有一個(gè)方法，也就是reload()方法，用于刷新當(dāng)前文檔，類似于瀏覽器上的刷新頁(yè)面按鈕。
代碼測(cè)試：
<template>
<div class="hello">
<img src="../imgs/01.jpg" alt="" />
<button @click="refresh">點(diǎn)擊刷新頁(yè)面</button>
</div>
</template>
<script>
export default {
name: "HelloWorld",
methods: {
refresh() {
location.reload();
},
},
};
</script>
<style scoped>
.hello img {
width: 800px;
display: block;
margin-bottom: 20px;
}
</style>
效果展示：
缺點(diǎn)： 想必大家都能看出來了叭，一閃一閃亮晶晶~
方法二：$router.go(0)
這種方法大家應(yīng)該比較熟悉了，學(xué)過vue路由跳轉(zhuǎn)的都知道$router.go()的作用：
> this.$router.go(-1)：后退+刷新； > this.$router.go(0)：刷新； > this.$router.go(n) ：前進(jìn)n個(gè)頁(yè)面
這個(gè)方法等同于上面的location.reload，也是利用瀏覽器的刷新功能，瘋狂按F5刷新。。。
代碼測(cè)試：
<template>
<div class="hello">
<img src="../imgs/02.jpg" alt="" />
<button @click="refresh">點(diǎn)擊刷新頁(yè)面</button>
</div>
</template>
<script>
export default {
name: "HelloWorld",
methods: {
refresh() {
this.$router.go(0);
},
},
};
</script>
<style scoped>
.hello img {
width: 800px;
display: block;
margin-bottom: 20px;
}
</style>
效果展示：
缺點(diǎn)： 肉眼可見！會(huì)出現(xiàn)一瞬間的空白頁(yè)面，用戶體驗(yàn)不好
方法三：provide、inject和$nextTick
首先，我們來認(rèn)識(shí)一下這組選項(xiàng)：
provide 選項(xiàng)應(yīng)該是：一個(gè)對(duì)象或返回一個(gè)對(duì)象的函數(shù)。
inject 選項(xiàng)應(yīng)該是：一個(gè)字符串?dāng)?shù)組，或 一個(gè)對(duì)象，對(duì)象的 [key] 是本地的綁定名。
在學(xué)習(xí)vue父子組件通信的時(shí)候，大家應(yīng)該都知道這是用來干嘛的了：父組件通過provide向子組件傳遞數(shù)據(jù)，子組件通過inject獲取數(shù)據(jù)。
那么$nextTick又是干哈的呢？
$nextTick 又說是Vue的另一個(gè)生命周期函數(shù)：當(dāng)你修改完數(shù)據(jù)（數(shù)據(jù)更新了）之后，Vue幫你操作完DOM之后，把真實(shí)的DOM放入頁(yè)面了（Dom更新渲染），Vue再幫我們調(diào)用這個(gè)函數(shù)（可以監(jiān)聽DOM元素被修改后，在該函數(shù)中寫你要執(zhí)行的邏輯）。
接下來，我們來組合一下思路：
我們?cè)诟附M件中通過給<router-view></router-view>添加v-if來控制子組件銷毀和重建的方式，從而控制頁(yè)面的再次加載。然后在需要當(dāng)前頁(yè)面刷新的頁(yè)面中注入 reload 依賴，直接通過this.reload來調(diào)用刷新。
代碼測(cè)試：
App組件：
<template>
<div id="app">
<HelloWorld v-if="isReload" />
</div>
</template>
<script>
import HelloWorld from "./components/HelloWorld.vue";
export default {
name: "App",
data() {
return {
isReload: true,
};
},
components: {
HelloWorld,
},
provide() {
return {
msg: "未刷新",
reload: this.reload,
};
},
methods: {
async reload() {
this.isReload = false;
await this.$nextTick();
this.isReload = true;
},
},
};
</script>
子組件：
<template>
<div class="hello">
<img src="../imgs/03.jpg" alt="" />
<p>{{ msg }}</p>
<button @click="refresh">點(diǎn)擊刷新頁(yè)面</button>
</div>
</template>
<script>
export default {
inject: ["reload", "msg"],
name: "HelloWorld",
methods: {
refresh() {
this.msg = "我刷新啦！";
this.reload;
},
},
};
</script>
<style scoped>
.hello img {
width: 800px;
display: block;
margin-bottom: 20px;
}
</style>效果展示：
缺點(diǎn)： 可以看到頁(yè)面不會(huì)刷白，但是這種方法也有很多弊端。我們都知道Vue 在修改數(shù)據(jù)后，視圖不會(huì)立刻更新，而是等同一事件循環(huán)中的所有數(shù)據(jù)變化完成之后，再統(tǒng)一進(jìn)行視圖更新。這樣容易造成事件循環(huán)；并且使用provide和inject也涉及到組件的多層級(jí)通信，有些繁瑣。
方法四：創(chuàng)建空白頁(yè)
這個(gè)方法…我此前從沒用過，就是利用$router.replace路由跳轉(zhuǎn)到一個(gè)空白頁(yè)面，然后在空白頁(yè)面中立即執(zhí)行$router.replace切換到原來的頁(yè)面。$router.replace不會(huì)向 history 添加新紀(jì)錄，當(dāng)路由跳轉(zhuǎn)得比較快的時(shí)候，不會(huì)出現(xiàn)一瞬間的空白頁(yè)。
代碼測(cè)試：
空白頁(yè)：
<template>
<div class="hello"></div>
</template>
<script>
export default {
name: "HelloTest",
created() {
this.$router.replace(this.$route.query.redirect);
},
};
</script>
<style scoped>
</style>
需要刷新的頁(yè)面：
<template>
<div class="hello">
<img src="../imgs/04.jpg" alt="" />
<button @click="refresh">點(diǎn)擊刷新頁(yè)面</button>
</div>
</template>
<script>
export default {
name: "HelloWorld",
methods: {
refresh() {
this.$router.replace(`/blank?redirect=${this.$route.fullPath}`);
},
},
};
</script>
<style scoped>
.hello img {
width: 800px;
display: block;
margin-bottom: 20px;
}
</style>路由：
const router = new VueRouter({
mode: 'history',
routes: [{
path: "/",
component: () => import('../components/HelloWorld.vue'),
meta: {
keepAlive: true,
}
},
{
path: "/blank",
component: () => import('../components/HelloTest.vue'),
meta: {
keepAlive: true,
}
}]
})
效果展示：
缺點(diǎn)： 大家應(yīng)該可以看到地址欄的變化。。
總結(jié)
以上就是比較常見的當(dāng)前頁(yè)面刷新的方法，各有優(yōu)缺點(diǎn)，根據(jù)應(yīng)用場(chǎng)景使用。
到此這篇關(guān)于Vue實(shí)現(xiàn)當(dāng)前頁(yè)面刷新的4種方法的文章就介紹到這了,更多相關(guān)Vue當(dāng)前頁(yè)面刷新內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了詳解VUE中的插值( Interpolation)語法,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10
vue構(gòu)建單頁(yè)面應(yīng)用實(shí)戰(zhàn)
本篇文章主要介紹了vue構(gòu)建單頁(yè)面應(yīng)用實(shí)戰(zhàn)，使用 SPA，沒有頁(yè)面切換，就沒有白屏阻塞，可以大大提高 H5 的性能，達(dá)到接近原生的流暢體驗(yàn)。2017-04-04
Element中table組件按照屬性執(zhí)行合并操作詳解
在我們?nèi)粘ｉ_發(fā)中，表格業(yè)務(wù)基本是必不可少的，對(duì)于老手來說確實(shí)簡(jiǎn)單，家常便飯罷了，但是對(duì)于新手小白如何最快上手搞定需求呢？本文從思路開始著手，幫你快速搞定表格2022-11-11
Vue中的scoped實(shí)現(xiàn)原理及穿透方法
這篇文章主要介紹了Vue中的scoped實(shí)現(xiàn)原理及穿透方法,本文通過實(shí)例文字相結(jié)合的形式給大家介紹的非常詳細(xì)，需要的朋友可以參考下2018-05-05
詳解Vue.js之視圖和數(shù)據(jù)的雙向綁定(v-model)
本篇文章主要介紹了Vue.js之視圖和數(shù)據(jù)的雙向綁定(v-model)，使用v-model指令,使得視圖和數(shù)據(jù)實(shí)現(xiàn)雙向綁定，有興趣的可以了解一下2017-06-06
this.$emit()的作用大家應(yīng)該也都知道,主要用于子組件像父組件傳值,這篇文章主要給大家介紹了關(guān)于vue中this.$emit使用方法的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02
這篇文章主要介紹了vue 源碼目錄及構(gòu)建過程分析，非常不錯(cuò)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-04-04
vue中v-if和v-for一起使用的弊端及解決辦法(同時(shí)使用 v-if 和 v-for不
當(dāng) v-if 和 v-for 同時(shí)存在于一個(gè)元素上的時(shí)候，v-if 會(huì)首先被執(zhí)行，這篇文章主要介紹了vue中v-if和v-for一起使用的弊端及解決辦法,需要的朋友可以參考下2023-07-07
vue中全局路由守衛(wèi)中替代this操作(this.$store/this.$vux)
這篇文章主要介紹了vue中全局路由守衛(wèi)中替代this操作(this.$store/this.$vux)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07
vue使用video插件vue-video-player的示例
這篇文章主要介紹了vue使用video插件vue-video-player的示例，幫助大家更好的理解和使用vue插件，感興趣的朋友可以了解下2020-10-10