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刷新當前頁面，且頁面不閃爍

場景：

在處理列表時，常常有刪除一條數(shù)據(jù)或者新增數(shù)據(jù)之后需要重新刷新當前頁面的需求。
需要切換中英文的網站，
大體概念就是頁面數(shù)據(jù)發(fā)生改變需要重新獲取數(shù)據(jù)或刷新當前頁時

刷新當前頁的方法

使用window.reload()，或者router.go(0)刷新時，整個瀏覽器進行了重新加載，閃爍，用戶體驗不好
provide/inject 組合

provide/inject 組合介紹

作用：允許一個祖先組件向其所有子孫后代注入一個依賴，不論組件層次有多深

provide：是一個對象，或者是一個返回對象的函數(shù)。里面呢就包含要給子孫后代的東西，也就是屬性和屬性值。(注意：子孫層的provide會掩蓋祖父層provide中相同key的屬性值)
inject：一個字符串數(shù)組，或者是一個對象。屬性值可以是一個對象，包含from和default默認值，from是在可用的注入內容中搜索用的 key (字符串或 Symbol)，意思就是祖父多層provide提供了很多數(shù)據(jù)，from屬性指定取哪一個key;default指定默認值。

provide/inject 組合如何實現(xiàn)頁面不閃爍刷新

在 App.vue 內聲明 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 依賴，在邏輯完成之后（刪除或添加…）,在子組件內引入（inject）然后直接this.reload()調用，即可刷新當前頁面。

export default {
? inject: ['reload'],
? methods: {
? ? login() {
? ? ? this.reload()
? ? }
? }
}

以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

解決Vue @submit 提交后不刷新頁面問題
這篇文章主要介紹了解決Vue @submit 提交后不刷新頁面問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-07-07
Vue-Router2.X多種路由實現(xiàn)方式總結
下面小編就為大家分享一篇Vue-Router2.X多種路由實現(xiàn)方式總結，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-02-02
Vue中使用pdf.js實現(xiàn)PDF文檔展示功能實例
最近做項目遇到在線預覽和下載pdf文件,試了多種pdf插件,例如jquery.media.js(ie無法直接瀏覽),最后選擇了pdf.js插件,這篇文章主要介紹了Vue中使用pdf.js實現(xiàn)PDF文檔展示功能的相關資料,需要的朋友可以參考下
2025-04-04
vue.js源代碼core scedule.js學習筆記
這篇文章主要為大家詳細介紹了vue.js源代碼core scedule.js的學習筆記，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-07-07
vue項目兼容IE瀏覽器的教程步驟
Vue的小伙伴們,困擾大家的IE瀏覽器支持Vue的問題,目前已經找到了一個比較好的解決方案,下面這篇文章主要給大家介紹了關于vue項目兼容IE瀏覽器的教程步驟,需要的朋友可以參考下
2023-03-03
Vue.js組件使用開發(fā)實例教程
Vue.js的組件可以理解為預先定義好了行為的ViewModel類。這篇文章主要介紹了Vue.js組件使用開發(fā)實例教程的相關資料,需要的朋友可以參考下
2016-11-11
vue實現(xiàn)右側滑出層動畫
這篇文章主要為大家詳細介紹了vue實現(xiàn)右側滑出層動畫，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-04-04
vue3提示用戶版本更新方式
本文介紹了如何在項目中創(chuàng)建和使用自定義插件,以在構建過程中檢查版本號,具體步驟包括在項目根目錄下創(chuàng)建buildLifeHook.ts文件,并在public目錄下創(chuàng)建version文件夾,然后在vite.config.ts中引用該插件,并在src/utils目錄下創(chuàng)建XxzUtils.ts文件
2024-12-12
Vue 理解之白話 getter/setter詳解
這篇文章主要介紹了Vue getter setter，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-04-04
Vue項目安裝插件并保存
今天小編就為大家分享一篇關于Vue項目安裝插件并保存，小編覺得內容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧
2019-01-01