vue項(xiàng)目刷新當(dāng)前頁(yè)面的三種方式(重載當(dāng)前頁(yè)面數(shù)據(jù))

更新時(shí)間：2023年01月17日 09:46:47 作者：echo丶若夢(mèng)

這篇文章主要介紹了vue項(xiàng)目刷新當(dāng)前頁(yè)面的三種方式(重載當(dāng)前頁(yè)面數(shù)據(jù)),本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

vue項(xiàng)目刷新當(dāng)前頁(yè)面的三種方式(重載當(dāng)前頁(yè)面數(shù)據(jù))

一、this.$router.go(0)

相當(dāng)于F5刷新，這種方法雖然代碼很少，只有一行，但是體驗(yàn)很差。頁(yè)面會(huì)一瞬間的白屏，體驗(yàn)不是很好

二、location.reload()

這種也是一樣，畫面一閃，體驗(yàn)不是很好，相當(dāng)于頁(yè)面刷新

推薦解決方法：

三、用provide / inject 組合

原理：允許一個(gè)祖先組件向其所有子孫后代注入一個(gè)依賴，不論組件層次有多深，并在起上下游關(guān)系成立的時(shí)間里始終生效
在App.vue,聲明reload方法，控制router-view的顯示或隱藏，從而控制頁(yè)面的再次加載。

<template>
  <div id="app">
    <router-view v-if="isRouterAlive"></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
  provide () {
    return {
      reload: this.reload
    }
  },
  data () {
    return {
      isRouterAlive: true
    }
  },
  methods: {
    reload () {
      this.isRouterAlive = false
      this.$nextTick(function () {
        this.isRouterAlive = true
      })
    }
  }
}
</script>

在需要用到刷新的頁(yè)面。在頁(yè)面注入App.vue組件提供（provide）的 reload 依賴，在邏輯完成之后（刪除或添加…）,直接this.reload()調(diào)用，即可刷新當(dāng)前頁(yè)面。

注入reload方法

export default {
  inject: ['reload'],
 }

在需要重載的地方直接調(diào)用

this.reload()

PS:vue項(xiàng)目刷新當(dāng)前頁(yè)面的三種方法

1、最直接整個(gè)頁(yè)面重新刷新。

location. reload();
this.$router.go(0);
// 這兩種都可以刷新當(dāng)前頁(yè)面的，缺點(diǎn)就是相當(dāng)于按ctrl+F5 強(qiáng)制刷新那種，整個(gè)頁(yè)面重新加載，會(huì)出現(xiàn)一個(gè)瞬間的空白頁(yè)面，體驗(yàn)不好。

2、新建一個(gè)空白頁(yè)面，點(diǎn)擊確定的時(shí)候先跳轉(zhuǎn)到這個(gè)空白頁(yè)，然后再立馬跳轉(zhuǎn)回來。這個(gè)方式，相比第一種不會(huì)出現(xiàn)一瞬間的空白頁(yè)，只是地址欄有個(gè)快速的切換的過程，也可采用。
3、provide / inject 刷新相對(duì)比較理想。

//首先在app.vue進(jìn)行修改
<template>
    <div id="app">
      // 控制router-view的顯示或隱藏，從而控制頁(yè)面的再次加載
      <router-view v-if="isRouterAlive"/>
    </div>
</template>

<script>
export default {
  name: "App",
  provide() {
    return {
      reload : this.reload,
    }
  },
  data() {
    return {
      isRouterAlive:true,
    };
  },
  created(){},
  methods: {
    // 通過聲明reload方法，控制router-view的顯示或隱藏，從而控制頁(yè)面的再次加載
    reload(){
      this.isRouterAlive = false;
      this.$nextTick(() => {
        this.isRouterAlive = true;
      })
    },
  },
};
</script>

在需要刷新的頁(yè)面引入后直接調(diào)用即可

<template>
  <div>
	<el-button icon="el-icon-refresh" @click="refresh">點(diǎn)擊刷新</el-button>
  </div>
</template>
<script>
export default {
//引用vue reload方法
  inject: ['reload'],
  name:"",
  data() {
	return {
	}
  },
methods: {
    refresh () {
      this.reload()
    }
  }
}
</script>

這樣就實(shí)現(xiàn)了子組件調(diào)取reload方法就實(shí)現(xiàn)了刷新vue組件的功能,而且實(shí)現(xiàn)了組件跨越層級(jí)傳遞數(shù)據(jù)方法。

到此這篇關(guān)于vue項(xiàng)目刷新當(dāng)前頁(yè)面的三種方式(重載當(dāng)前頁(yè)面數(shù)據(jù))的文章就介紹到這了,更多相關(guān)vue刷新當(dāng)前頁(yè)面內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: