vue關(guān)于頁(yè)面刷新的幾個(gè)方式解讀
關(guān)于頁(yè)面刷新的幾個(gè)方式
在寫項(xiàng)目的時(shí)候會(huì)遇到需要刷新頁(yè)面重新獲取數(shù)據(jù)，淺淺總結(jié)了一下幾種方案。
this.$router.go(0)
強(qiáng)制刷新頁(yè)面，會(huì)出現(xiàn)一瞬間的白屏，用戶體驗(yàn)感不好。
location.reload()
也是強(qiáng)制刷新頁(yè)面，和第一種方法一樣，會(huì)造成一瞬間的白屏，用戶體驗(yàn)感不好。
跳轉(zhuǎn)空白頁(yè)再跳回原頁(yè)面
在需要頁(yè)面刷新的地方寫上：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ì)一閃，但是能看見(jiàn)路徑快速變化。
控制<router-view>的顯示隱藏
在開發(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; //再打開
});
},例如：
在需要刷新的頁(yè)面中注入依賴：inject: ['reload']
在需要刷新的地方調(diào)用：this.reload()
然后就可以實(shí)現(xiàn)頁(yè)面的刷新功能了。這種可以實(shí)現(xiàn)頁(yè)面刷新但是不會(huì)造成白屏和路由跳轉(zhuǎn)， 是開發(fā)過(guò)程中用戶體驗(yàn)感較好的一種。
vue監(jiān)聽頁(yè)面刷新
App.vue文件
?beforeCreate(){
? ? console.log('我刷新了')
? }總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue實(shí)現(xiàn)動(dòng)態(tài)顯示表單項(xiàng)填寫進(jìn)度功能
這篇文章主要介紹了Vue實(shí)現(xiàn)動(dòng)態(tài)顯示表單項(xiàng)填寫進(jìn)度功能，此功能可以幫助用戶了解表單填寫的進(jìn)度和當(dāng)前狀態(tài)，提高用戶體驗(yàn)，通常實(shí)現(xiàn)的方式是在表單中添加進(jìn)度條，根據(jù)用戶填寫狀態(tài)動(dòng)態(tài)更新進(jìn)度條，感興趣的同學(xué)可以參考下文2023-05-05
這篇文章主要給大家分享介紹了關(guān)于動(dòng)態(tài)Axios的配置步驟，文中通過(guò)示例代碼介紹的非常詳細(xì)，通過(guò)這個(gè)教程大家可以很方便的實(shí)現(xiàn)動(dòng)態(tài)Axios的配置，需要的朋友可以參考借鑒，下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2018-01-01
Vue3中的setup執(zhí)行時(shí)機(jī)與注意點(diǎn)說(shuō)明
這篇文章主要介紹了Vue3中的setup執(zhí)行時(shí)機(jī)與注意點(diǎn)說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
v-model?是?Vue.js?中一個(gè)重要的指令,它提供了一種簡(jiǎn)潔的方式來(lái)實(shí)現(xiàn)雙向數(shù)據(jù)綁定,下面小編就來(lái)帶大家深入了解下vue雙向數(shù)據(jù)綁定的原理與應(yīng)用吧2023-09-09
vue中axios利用blob實(shí)現(xiàn)文件瀏覽器下載方式
這篇文章主要介紹了vue中axios利用blob實(shí)現(xiàn)文件瀏覽器下載方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-05-05
這篇文章主要為大家詳細(xì)介紹了vue.js初學(xué)入門教程,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-11-11
Vue3利用組合式函數(shù)和Shared Worker實(shí)現(xiàn)后臺(tái)分片上傳
這篇文章主要為大家詳細(xì)介紹了Vue3如何利用組合式函數(shù)和Shared Worker實(shí)現(xiàn)后臺(tái)分片上傳(帶哈希計(jì)算),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-10-10
Vue+Vite項(xiàng)目初建(axios+Unocss+iconify)的實(shí)現(xiàn)
一個(gè)好的項(xiàng)目開始搭建總是需要配置許多初始化配置,本文就來(lái)介紹一下Vue+Vite項(xiàng)目初建(axios+Unocss+iconify)的實(shí)現(xiàn),具有一定的參考價(jià)值,感興趣的可以了解一下2024-02-02
這篇文章主要介紹了vue.config.js中的devServer使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
vue項(xiàng)目history模式刷新404問(wèn)題解決辦法
這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目history模式刷新404問(wèn)題的解決辦法,需要的朋友可以參考下2023-11-11