vue關(guān)于頁(yè)面刷新的幾個(gè)方式解讀
關(guān)于頁(yè)面刷新的幾個(gè)方式
在寫(xiě)項(xiàng)目的時(shí)候會(huì)遇到需要刷新頁(yè)面重新獲取數(shù)據(jù)，淺淺總結(jié)了一下幾種方案。
this.$router.go(0)
強(qiáng)制刷新頁(yè)面，會(huì)出現(xiàn)一瞬間的白屏，用戶(hù)體驗(yàn)感不好。
location.reload()
也是強(qiáng)制刷新頁(yè)面，和第一種方法一樣，會(huì)造成一瞬間的白屏，用戶(hù)體驗(yàn)感不好。
跳轉(zhuǎn)空白頁(yè)再跳回原頁(yè)面
在需要頁(yè)面刷新的地方寫(xiě)上：this.$router.push('/emptyPage')，跳轉(zhuǎn)到一個(gè)空白頁(yè)。在emptyPage.vue里beforeRouteEnter 鉤子里控制頁(yè)面跳轉(zhuǎn)，從而達(dá)到刷新的效果
beforeRouteEnter (to, from, next) {
next(vm => {
vm.$router.replace(from.path)
})
}。這種畫(huà)面雖不會(huì)一閃，但是能看見(jiàn)路徑快速變化。
控制<router-view>的顯示隱藏
在開(kāi)發(fā)過(guò)程中最常用的還是這種方法。
默認(rèn)<router-view v-if="isRouterAlive" />isRouterAlive肯定是true，在需要刷新的時(shí)候把這個(gè)值設(shè)為false，接著再重新設(shè)為true。
reload() {
this.isRouterAlive = false; //先關(guān)閉，
this.$nextTick(function () {
this.isRouterAlive = true; //再打開(kāi)
});
},例如：
在需要刷新的頁(yè)面中注入依賴(lài)：inject: ['reload']
在需要刷新的地方調(diào)用：this.reload()
然后就可以實(shí)現(xiàn)頁(yè)面的刷新功能了。這種可以實(shí)現(xiàn)頁(yè)面刷新但是不會(huì)造成白屏和路由跳轉(zhuǎn)， 是開(kāi)發(fā)過(guò)程中用戶(hù)體驗(yàn)感較好的一種。
vue監(jiān)聽(tīng)頁(yè)面刷新
App.vue文件
?beforeCreate(){
? ? console.log('我刷新了')
? }總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue?運(yùn)行高德地圖官方樣例,設(shè)置class無(wú)效的解決
這篇文章主要介紹了Vue?運(yùn)行高德地圖官方樣例,設(shè)置class無(wú)效的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
vue 實(shí)現(xiàn)v-for循環(huán)回來(lái)的數(shù)據(jù)動(dòng)態(tài)綁定id
今天小編就為大家分享一篇vue 實(shí)現(xiàn)v-for循環(huán)回來(lái)的數(shù)據(jù)動(dòng)態(tài)綁定id，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
你不知道的Vue技巧之--開(kāi)發(fā)一個(gè)可以通過(guò)方法調(diào)用的組件(推薦)
這篇文章主要介紹了你不知道的Vue技巧之--開(kāi)發(fā)一個(gè)可以通過(guò)方法調(diào)用的組件，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
在 Vue 中，如果直接對(duì)數(shù)組進(jìn)行操作，比如使用下標(biāo)直接修改元素，數(shù)組長(zhǎng)度不變時(shí)， Vue 是無(wú)法監(jiān)測(cè)到這種變化的，導(dǎo)致無(wú)法觸發(fā)視圖更新。針對(duì)該問(wèn)題本文為大家整理了一些方法，需要的可以參考一下2023-01-01
vue中選中多個(gè)選項(xiàng)并且改變選中的樣式的實(shí)例代碼
這篇文章主要介紹了vue中選中多個(gè)選項(xiàng)并且改變選中的樣式，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-09-09
這篇文章主要介紹了在IDEA中安裝vue插件全過(guò)程,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04
vue elementUI el-form 數(shù)據(jù)無(wú)法賦值且不報(bào)錯(cuò)的問(wèn)題及解決方法
vue項(xiàng)目中使用elementUI的el-form組件,里面有部分后端數(shù)據(jù)遍歷的字段和部分確定的字段,遇到個(gè)問(wèn)題遍歷的字段可以修改值但是確定的幾個(gè)字段無(wú)法修改值,下面小編給大家分享vue elementUI el-form 數(shù)據(jù)無(wú)法賦值且不報(bào)錯(cuò)的問(wèn)題及解決方法,感興趣的朋友一起看看吧2023-12-12
vue項(xiàng)目中使用html2canvas解決截圖不全的問(wèn)題
本文主要介紹了vue項(xiàng)目中使用html2canvas解決截圖不全的問(wèn)題2023-11-11
這篇文章主要介紹了React中父子組件通信詳解，在父組件中，為子組件添加屬性數(shù)據(jù)，即可實(shí)現(xiàn)父組件向子組件通信，文章通過(guò)圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-10-10
Vue3中Composition?API和Options?API的區(qū)別
Vue3的Composition API和Options API是Vue.js框架中的兩種不同的API，本文主要介紹了Vue3中Composition?API和Options?API的區(qū)別，文中通過(guò)示例代碼介紹的非常詳細(xì)，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-06-06