vue刷新頁面時去閃爍提升用戶體驗效果的實現(xiàn)方法
首先在最外層div添加v-if="isReloadAlive
",并創(chuàng)建變量isReloadAlive = true
隨后添加provide()以及reload方法,如下:
export default { provide() { return { reload: this.reload } }, data(){ isReloadAlive : true }, methods: { reload() { this.isReloadAlive = false; this.$nextTick(function(){ this.isReloadAlive = true; }) } }
最后調(diào)用this.reload()
即可
補充:下面看下vue解決刷新時閃爍問題
1.在vue容器的div里面加上 v-cloak
<div id="app" v-cloak>
2.樣式文件中加上
<style type="text/css"> [v-cloak] { display: none !important; } </style>
總結(jié)
以上所述是小編給大家介紹的vue刷新頁面時去閃爍提升體驗方法,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
vue directive全局自定義指令實現(xiàn)按鈕級別權(quán)限控制的操作方法
這篇文章主要介紹了vue directive全局自定義指令實現(xiàn)按鈕級別權(quán)限控制,本文結(jié)合實例代碼對基本概念做了詳細(xì)講解,需要的朋友可以參考下2023-02-02Vue路由回退的完美解決方案(vue-route-manager)
最近做了一個vue項目關(guān)于路由場景的問題,路由如何回退指定頁面,在此做個記錄,這篇文章主要給大家介紹了關(guān)于Vue路由回退的完美解決方案,主要利用的是vue-route-manager,需要的朋友可以參考下2021-09-09vue?url跳轉(zhuǎn)解析和參數(shù)編碼介紹
這篇文章主要介紹了vue?url跳轉(zhuǎn)解析和參數(shù)編碼,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03vue項目打包為APP,靜態(tài)資源正常顯示,但API請求不到數(shù)據(jù)的操作
這篇文章主要介紹了vue項目打包為APP,靜態(tài)資源正常顯示,但API請求不到數(shù)據(jù)的操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09vue3如何通過provide和inject實現(xiàn)多層級組件通信
這篇文章主要介紹了vue3如何通過provide和inject實現(xiàn)多層級組件通信,本文通過實例代碼給大家講解的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-11-11element table跨分頁多選及回顯的實現(xiàn)示例
本文主要介紹了element table跨分頁多選及回顯的實現(xiàn)示例,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-02-02