Vue如何實(shí)現(xiàn)當(dāng)前頁(yè)面刷新

這篇“Vue如何實(shí)現(xiàn)當(dāng)前頁(yè)面刷新”文章的知識(shí)點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價(jià)值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來(lái)看看這篇“Vue如何實(shí)現(xiàn)當(dāng)前頁(yè)面刷新”文章吧。

方法一：location.reload

學(xué)習(xí)JS的過(guò)程中，大家應(yīng)該都了解過(guò)Browser 對(duì)象，其中Location 對(duì)象是 window 對(duì)象的一部分。Location 對(duì)象中有一個(gè)方法，也就是reload()方法，用于刷新當(dāng)前文檔，類(lèi)似于瀏覽器上的刷新頁(yè)面按鈕。

代碼測(cè)試：

<template>
  <div class="hello">
    <img src="../imgs/01.jpg" alt="" />
    <button @click="refresh">點(diǎn)擊刷新頁(yè)面</button>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  methods: {
    refresh() {
      location.reload();
    },
  },
};
</script>

<style scoped>
.hello img {
  width: 800px;
  display: block;
  margin-bottom: 20px;
}
</style>

效果展示：

缺點(diǎn)： 想必大家都能看出來(lái)了叭，一閃一閃亮晶晶~

方法二：$router.go(0)

這種方法大家應(yīng)該比較熟悉了，學(xué)過(guò)vue路由跳轉(zhuǎn)的都知道$router.go()的作用：

> this.$router.go(-1)：后退+刷新；
> this.$router.go(0)：刷新；
> this.$router.go(n) ：前進(jìn)n個(gè)頁(yè)面

這個(gè)方法等同于上面的location.reload，也是利用瀏覽器的刷新功能，瘋狂按F5刷新。。。

代碼測(cè)試：

<template>
  <div class="hello">
    <img src="../imgs/02.jpg" alt="" />
    <button @click="refresh">點(diǎn)擊刷新頁(yè)面</button>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  methods: {
    refresh() {
      this.$router.go(0);
    },
  },
};
</script>

<style scoped>
.hello img {
  width: 800px;
  display: block;
  margin-bottom: 20px;
}
</style>

效果展示：

缺點(diǎn)： 肉眼可見(jiàn)！會(huì)出現(xiàn)一瞬間的空白頁(yè)面，用戶(hù)體驗(yàn)不好

方法三：provide、inject和$nextTick

首先，我們來(lái)認(rèn)識(shí)一下這組選項(xiàng)：

provide 選項(xiàng)應(yīng)該是：一個(gè)對(duì)象或返回一個(gè)對(duì)象的函數(shù)。
inject 選項(xiàng)應(yīng)該是：一個(gè)字符串?dāng)?shù)組，或 一個(gè)對(duì)象，對(duì)象的 [key] 是本地的綁定名。

在學(xué)習(xí)vue父子組件通信的時(shí)候，大家應(yīng)該都知道這是用來(lái)干嘛的了：父組件通過(guò)provide向子組件傳遞數(shù)據(jù)，子組件通過(guò)inject獲取數(shù)據(jù)。

那么$nextTick又是干哈的呢？

$nextTick 又說(shuō)是Vue的另一個(gè)生命周期函數(shù)：當(dāng)你修改完數(shù)據(jù)（數(shù)據(jù)更新了）之后，Vue幫你操作完DOM之后，把真實(shí)的DOM放入頁(yè)面了（Dom更新渲染），Vue再幫我們調(diào)用這個(gè)函數(shù)（可以監(jiān)聽(tīng)DOM元素被修改后，在該函數(shù)中寫(xiě)你要執(zhí)行的邏輯）。
接下來(lái)，我們來(lái)組合一下思路：

我們?cè)诟附M件中通過(guò)給<router-view></router-view>添加v-if來(lái)控制子組件銷(xiāo)毀和重建的方式，從而控制頁(yè)面的再次加載。然后在需要當(dāng)前頁(yè)面刷新的頁(yè)面中注入 reload 依賴(lài)，直接通過(guò)this.reload來(lái)調(diào)用刷新。

代碼測(cè)試：

App組件：

<template>
  <div id="app">
    <HelloWorld v-if="isReload" />
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";

export default {
  name: "App",
  data() {
    return {
      isReload: true,
    };
  },
  components: {
    HelloWorld,
  },
  provide() {
    return {
      msg: "未刷新",
      reload: this.reload,
    };
  },
  methods: {
    async reload() {
      this.isReload = false;
      await this.$nextTick();
      this.isReload = true;
    },
  },
};
</script>

子組件：

<template>
  <div class="hello">
    <img src="../imgs/03.jpg" alt="" />
    <p>{{ msg }}</p>
    <button @click="refresh">點(diǎn)擊刷新頁(yè)面</button>
  </div>
</template>

<script>
export default {
  inject: ["reload", "msg"],
  name: "HelloWorld",
  methods: {
    refresh() {
      this.msg = "我刷新啦！";
      this.reload;
    },
  },
};
</script>

<style scoped>
.hello img {
  width: 800px;
  display: block;
  margin-bottom: 20px;
}
</style>

效果展示：

缺點(diǎn)： 可以看到頁(yè)面不會(huì)刷白，但是這種方法也有很多弊端。我們都知道Vue 在修改數(shù)據(jù)后，視圖不會(huì)立刻更新，而是等同一事件循環(huán)中的所有數(shù)據(jù)變化完成之后，再統(tǒng)一進(jìn)行視圖更新。這樣容易造成事件循環(huán)；并且使用provide和inject也涉及到組件的多層級(jí)通信，有些繁瑣。

方法四：創(chuàng)建空白頁(yè)

這個(gè)方法…我此前從沒(méi)用過(guò)，就是利用$router.replace路由跳轉(zhuǎn)到一個(gè)空白頁(yè)面，然后在空白頁(yè)面中立即執(zhí)行$router.replace切換到原來(lái)的頁(yè)面。$router.replace不會(huì)向 history 添加新紀(jì)錄，當(dāng)路由跳轉(zhuǎn)得比較快的時(shí)候，不會(huì)出現(xiàn)一瞬間的空白頁(yè)。

代碼測(cè)試：

空白頁(yè)：

<template>
  <div class="hello"></div>
</template>

<script>
export default {
  name: "HelloTest",
  created() {
    this.$router.replace(this.$route.query.redirect);
  },
};
</script>


<style scoped>
</style>

需要刷新的頁(yè)面：

<template>
  <div class="hello">
    <img src="../imgs/04.jpg" alt="" />
    <button @click="refresh">點(diǎn)擊刷新頁(yè)面</button>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  methods: {
    refresh() {
      this.$router.replace(`/blank?redirect=${this.$route.fullPath}`);
    },
  },
};
</script>

<style scoped>
.hello img {
  width: 800px;
  display: block;
  margin-bottom: 20px;
}
</style>

路由：

const router = new VueRouter({
  mode: 'history',
  routes: [{
    path: "/",
    component: () => import('../components/HelloWorld.vue'),
    meta: {
      keepAlive: true,
    }
  },
  {
    path: "/blank",
    component: () => import('../components/HelloTest.vue'),
    meta: {
      keepAlive: true,
    }
  }]
})

效果展示：

缺點(diǎn)： 大家應(yīng)該可以看到地址欄的變化。

以上就是關(guān)于“Vue如何實(shí)現(xiàn)當(dāng)前頁(yè)面刷新”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對(duì)大家有幫助，若想了解更多相關(guān)的知識(shí)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。