vue解決刷新頁面時會出現(xiàn)變量閃爍的問題
更新時間：2022年01月24日 14:44:08 作者：YOYO__2018
這篇文章主要介紹了vue解決刷新頁面時會出現(xiàn)變量閃爍的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
刷新頁面時會出現(xiàn)變量閃爍問題
在使用vue綁定數(shù)據(jù)的時候，刷新頁面時會出現(xiàn)變量閃爍，
解決辦法是: v-cloak
將代碼修改如下：
<div class="#app" v-cloak>
? ? <p>{{value.name}}</p>
</div>vue刷新當(dāng)前頁面，且頁面不閃爍
場景：
- 在處理列表時，常常有刪除一條數(shù)據(jù)或者新增數(shù)據(jù)之后需要重新刷新當(dāng)前頁面的需求。
- 需要切換中英文的網(wǎng)站，
- 大體概念就是頁面數(shù)據(jù)發(fā)生改變需要重新獲取數(shù)據(jù)或刷新當(dāng)前頁時
刷新當(dāng)前頁的方法
- 使用window.reload()，或者router.go(0)刷新時，整個瀏覽器進(jìn)行了重新加載，閃爍，用戶體驗(yàn)不好
- provide/inject 組合
provide/inject 組合介紹
作用：允許一個祖先組件向其所有子孫后代注入一個依賴，不論組件層次有多深
provide：是一個對象，或者是一個返回對象的函數(shù)。里面呢就包含要給子孫后代的東西，也就是屬性和屬性值。(注意：子孫層的provide會掩蓋祖父層provide中相同key的屬性值)inject：一個字符串?dāng)?shù)組，或者是一個對象。屬性值可以是一個對象，包含from和default默認(rèn)值，from是在可用的注入內(nèi)容中搜索用的 key (字符串或 Symbol)，意思就是祖父多層provide提供了很多數(shù)據(jù)，from屬性指定取哪一個key;default指定默認(rèn)值。
provide/inject 組合如何實(shí)現(xiàn)頁面不閃爍刷新
在 App.vue 內(nèi)聲明 reload 方法，控制 router-view 的顯示或隱藏，從而控制頁面的再次加載
<template>
<div id="app" v-if="isRouterAlive">
<keep-alive>
<router-view v-if="$route.meta.keepAlive" />
</keep-alive>
<router-view v-if="!$route.meta.keepAlive" />
</div>
</template>
export default {
name: 'App',
provide() {
return {
reload: this.reload
}
},
data() {
return {
isRouterAlive: true
}
},
methods: {
reload() {
this.isRouterAlive = false
this.$nextTick(() => {
this.isRouterAlive = true
})
}
}
}
在頁面注入App.vue組件提供（provide）的 reload 依賴，在邏輯完成之后（刪除或添加…）,在子組件內(nèi)引入（inject）然后直接this.reload()調(diào)用，即可刷新當(dāng)前頁面。
export default {
? inject: ['reload'],
? methods: {
? ? login() {
? ? ? this.reload()
? ? }
? }
}以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了解決Vue @submit 提交后不刷新頁面問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
Vue-Router2.X多種路由實(shí)現(xiàn)方式總結(jié)
下面小編就為大家分享一篇Vue-Router2.X多種路由實(shí)現(xiàn)方式總結(jié)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
Vue中使用pdf.js實(shí)現(xiàn)PDF文檔展示功能實(shí)例
最近做項(xiàng)目遇到在線預(yù)覽和下載pdf文件,試了多種pdf插件,例如jquery.media.js(ie無法直接瀏覽),最后選擇了pdf.js插件,這篇文章主要介紹了Vue中使用pdf.js實(shí)現(xiàn)PDF文檔展示功能的相關(guān)資料,需要的朋友可以參考下2025-04-04
vue.js源代碼core scedule.js學(xué)習(xí)筆記
這篇文章主要為大家詳細(xì)介紹了vue.js源代碼core scedule.js的學(xué)習(xí)筆記，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
Vue的小伙伴們,困擾大家的IE瀏覽器支持Vue的問題,目前已經(jīng)找到了一個比較好的解決方案,下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目兼容IE瀏覽器的教程步驟,需要的朋友可以參考下2023-03-03
Vue.js的組件可以理解為預(yù)先定義好了行為的ViewModel類。這篇文章主要介紹了Vue.js組件使用開發(fā)實(shí)例教程的相關(guān)資料,需要的朋友可以參考下2016-11-11
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)右側(cè)滑出層動畫，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-04-04
本文介紹了如何在項(xiàng)目中創(chuàng)建和使用自定義插件,以在構(gòu)建過程中檢查版本號,具體步驟包括在項(xiàng)目根目錄下創(chuàng)建buildLifeHook.ts文件,并在public目錄下創(chuàng)建version文件夾,然后在vite.config.ts中引用該插件,并在src/utils目錄下創(chuàng)建XxzUtils.ts文件2024-12-12
這篇文章主要介紹了Vue getter setter，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
今天小編就為大家分享一篇關(guān)于Vue項(xiàng)目安裝插件并保存，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2019-01-01