單頁(yè)面Vue頁(yè)面刷新出現(xiàn)閃爍問(wèn)題及解決
分析原因: 為什么刷新會(huì)出現(xiàn)閃爍的問(wèn)題?
因?yàn)闉g覽器是html從上到下執(zhí)行,
先執(zhí)行Dom元素
然后執(zhí)行javaScript元素
當(dāng)走到j(luò)avaScript時(shí),Dom元素已經(jīng)開(kāi)始走動(dòng),所以如果網(wǎng)慢的話(huà),會(huì)顯示的特別明顯
解決方法: 使用 v-cloak 用法
v-cloak指令 和 css規(guī)則 [v-cloak] {display:none} 一起用時(shí),這個(gè)指令可以隱藏未編譯的Mustache標(biāo)簽直到實(shí)例準(zhǔn)備完畢。
原理:
帶有v-clock的的元素設(shè)置為display:none,隱藏掉,在等到vue解析到帶有v-clock的節(jié)點(diǎn)時(shí)候,會(huì)把a(bǔ)ttribute和class同時(shí)remove掉,這樣就可以實(shí)現(xiàn)防止節(jié)點(diǎn)的閃爍。
實(shí)例:
[v-cloak] { display: none; } <div v-cloak> {{ message }} </div>
圖解:
html 代碼
加在掛載點(diǎn)(#app),可以讓整個(gè)頁(yè)面在未加載完JS時(shí),整個(gè)頁(yè)面都不渲染, 如果不需要,只需要在對(duì)應(yīng)閃爍的標(biāo)簽中加v-cloak即可
css 代碼
關(guān)于Vue刷新頁(yè)面問(wèn)題
Vue 中是單頁(yè)面,當(dāng)然需要刷新數(shù)據(jù)咯
你一定遇到這樣的需求:
比如在刪除或者增加一條記錄的時(shí)候希望當(dāng)前頁(yè)面可以重新刷新或者這個(gè)頁(yè)面有個(gè)組件 ,但是這個(gè)組件里面的點(diǎn)擊事件還是到當(dāng)前頁(yè)面
如何解決
1.在使用Vue-router做項(xiàng)目時(shí),會(huì)遇到如/serviceId/:id這樣只改變id號(hào)的場(chǎng)景。由于router-view是復(fù)用的,單純的改變id號(hào)并不會(huì)刷新router-view,而這并不是我們所期望的結(jié)果。
2.我們可以在點(diǎn)擊事件上 window.reload(),或者router.go(0)刷新時(shí),強(qiáng)制刷新整個(gè)頁(yè)面。整個(gè)瀏覽器進(jìn)行了重新加載,閃爍,體驗(yàn)不好
3.使用watch的方法,具體的可以看一下官方文檔
watch: {? '$route': function (to, from) {? ? ? ? ?this.$store.dispatch('updateActiveTemplateId',? ? ? ? ?this.$route.params.templateId) // 通過(guò)更新Vuex中的store的數(shù)據(jù),讓數(shù)據(jù)發(fā)生變化? ? ? ? ? ? ?this.getTemplateById()? } }
當(dāng)然我也看過(guò)一些博客,總結(jié)了下 如何更好的解決
provide / inject 組合
作用:允許一個(gè)祖先組件向其所有子孫后代注入一個(gè)依賴(lài),不論組件層次有多深,并在起上下游關(guān)系成立的時(shí)間里始終生效。
在你的App.vue頁(yè)面里面
聲明reload方法,控制router-view的顯示或隱藏,從而控制頁(yè)面的再次加載
然后在你的詳情頁(yè)面
tableList.vue:
在頁(yè)面注入App.vue組件提供(provide)的 reload 依賴(lài),在邏輯完成之后(刪除或添加...),直接this.reload()調(diào)用,即可刷新當(dāng)前頁(yè)面。
解釋下:
provide
:選項(xiàng)應(yīng)該是一個(gè)對(duì)象或返回一個(gè)對(duì)象的函數(shù)。該對(duì)象包含可注入其子孫的屬性。inject
:一個(gè)字符串?dāng)?shù)組,或一個(gè)對(duì)象,對(duì)象的 key 是本地的綁定名
提示:provide 和 inject 綁定并不是可響應(yīng)的。這是刻意為之的。如果你傳入了一個(gè)可監(jiān)聽(tīng)的對(duì)象,那么其對(duì)象的屬性還是可響應(yīng)的。
當(dāng)然你不能 是在created里調(diào)用getData(), 在getData里又調(diào)用了this.reload().
這樣會(huì)導(dǎo)致死循環(huán)的 ,所以要合理的運(yùn)用就這個(gè)方法
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
- vue3+element?Plus使用el-tabs標(biāo)簽頁(yè)解決頁(yè)面刷新不回到默認(rèn)頁(yè)的問(wèn)題
- Vue實(shí)現(xiàn)當(dāng)前頁(yè)面刷新的七種方法總結(jié)
- Vue實(shí)現(xiàn)當(dāng)前頁(yè)面刷新的4種方法舉例
- vue路由傳參之使用query傳參頁(yè)面刷新數(shù)據(jù)丟失問(wèn)題解析
- Vue路由傳參頁(yè)面刷新后參數(shù)丟失原因和解決辦法
- 解決vue頁(yè)面刷新產(chǎn)生白屏的問(wèn)題
- Vue實(shí)現(xiàn)父子組件頁(yè)面刷新的幾種常用方法
- vue數(shù)據(jù)變化但頁(yè)面刷新問(wèn)題
- vue?頁(yè)面刷新、重置、更新頁(yè)面所有數(shù)據(jù)的示例代碼
相關(guān)文章
在vue中v-for循環(huán)遍歷圖片不顯示錯(cuò)誤的解決方案
這篇文章主要介紹了在vue中v-for循環(huán)遍歷圖片不顯示錯(cuò)誤的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-01-01vue+AI智能機(jī)器人回復(fù)功能實(shí)現(xiàn)
這篇文章主要為大家詳細(xì)介紹了vue+AI智能機(jī)器人回復(fù)功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-07-07vue-cli解決IE瀏覽器sockjs-client錯(cuò)誤方法
這篇文章主要為大家介紹了vue-cli解決IE瀏覽器sockjs-client錯(cuò)誤方法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08vue3數(shù)據(jù)可視化實(shí)現(xiàn)數(shù)字滾動(dòng)特效代碼
這篇文章主要介紹了vue3數(shù)據(jù)可視化實(shí)現(xiàn)數(shù)字滾動(dòng)特效,實(shí)現(xiàn)思路是使用Vue.component定義公共組件,使用window.requestAnimationFrame(首選,次選setTimeout)來(lái)循環(huán)數(shù)字動(dòng)畫(huà),詳細(xì)代碼跟隨小編一起看看吧2022-09-09使用window.open和vue router新開(kāi)頁(yè)面
這篇文章主要介紹了使用window.open和vue router新開(kāi)頁(yè)面方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03vue項(xiàng)目使用luckyexcel預(yù)覽excel表格功能(心路歷程)
這篇文章主要介紹了vue項(xiàng)目使用luckyexcel預(yù)覽excel表格,我總共嘗試了2種方法預(yù)覽excel,均可實(shí)現(xiàn),還發(fā)現(xiàn)一種方法可以實(shí)現(xiàn),需要后端配合,叫做KKfileview,本文給大家介紹的非常詳細(xì),需要的朋友可以參考下2023-10-10vue使用this.$message不生效的部分原因及解決方案
這篇文章主要介紹了vue使用this.$message不生效的部分原因及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-09-09