vue強制刷新的方法

一、強制全局刷新方法1

重新載入當前文檔:location.reload();

定義和用法：

reload()方法用於刷新當前文檔。

reload() 方法類似於你瀏覽器上的刷新頁面按鈕F5。

案例：

 

 

點擊修改按鈕后，重新加載頁面，讓修改后的結果顯示出來。

onSubmit() {
         ...
        update(...).then(response => {
          if (response.success) {
            this.$message({
              message: response.msg,
              type: response.success
            });
          }
          setTimeout(() => {
            this.listLoading = false
          }, 1.5 * 1000)
        })
        location.reload()
      },

PS：如果使用getList（）來刷新頁面，有可能有時不會有刷新的效果。而用location.reload()方法是肯定會刷新的。

二、強制全局刷新方法2

經常使用vue的小伙伴看到這個應該很熟悉吧，我們經常用它來實現前進后退，但別忘了它還可以實現自身頁面刷新

this.$router.go(0)

對於以上兩種方法，雖然都可以實現頁面刷新，但頁面會刷的白一下，給用戶的體驗非常不好。利用provide/inject組合方式是我目前覺得最好用的方法，而且可以實現局部刷新。下面我們就來詳細介紹其用法

三、強制局部刷新方法

vue局部刷新

通過設置isReload來解決不刷新問題，原理就是通過控制組件容器的出現與消失, 達到重新渲染的效果 , 從而實現我們的目的。

（1）、在父組件Layout.vue的子組件Content.vue 中定義全局方法reload()

<template>
  <section class="app-main">
    <transition name="fade-transform" mode="out-in">
      <router-view v-if="isReload1"/>
    </transition>
  </section>
</template>

<script>
export default {
  name: 'AppMain',
  data() {
    return {
      isReload1: true
    }
  },
  provide() {
    return {
      reload1: this.reload1, }; },
  methods: {
    reload1() { this.isReload1 = false;
      this.$nextTick(() => {
        this.isReload1 = true; }); },
  }

}
</script>

<style scoped>
.app-main {
  /*58 = navbar  */
  min-height: calc(100vh - 58px);
  position: relative;
  overflow: hidden;
}
</style>

在需要引入的組件中引入

inject: ["reload1"],

然后調用此方法：

onSubmit() {
        ...
        update(...).then(response => {
          if (response.success) {
            this.$message({
              message: response.msg,
              type: response.success
            });
          }
          setTimeout(() => {
            this.listLoading = false
          }, 1.5 * 1000)
        })
        this.reload1()
      },

這種方法比第一種方法的用戶體驗好一些。