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