Vue項目中刷新當前頁面的方法

Vue項目中刷新當前頁面的方法

• JS 原生刷新頁面方法：window.location.reload()
• 利用路由刷新的方法：this.$route.go(0)
• 利用 vue 提供的 provide 和 inject 自定義刷新

前兩種方法：js原生方法和路由刷新相當於強制刷新當前頁面，雖然比較簡單方便，但是一旦調用頁面會出現明顯的白屏現象，用戶體樣不好。下面介紹第三種方式，可以較好解決白屏問題。

利用 provide 和 inject 實現頁面刷新

• 首先在 App.vue 的 <router-link /> 添加 v-if 屬性

  <router-link v-if='isRouterAlive'/>
  

• 其次在 data 里面添加 isRouetrAlive，這個屬性名可以自定義，默認設置為 true，如果為 false 整個頁面就不會顯示了。

  data () {
    return {
      isRouterAlive: true
    }
  }
  

• 然后在 methods 里面添加一個刷新方法

  methods: {
    reload () {
      this.isRouterAlive = false
      this.$nextTick(() => {
        this.isRouterAlive = true
      })
    }
  }
  

• 最后需要把這個函數 provide 出去

  provide () {
    return {
      reload: this.reload
    }
  }
  

App.vue 組件上的設置已經完成，在需要刷新的頁面上注入這個函數然后調用就可。

• 首先注入這個函數，注意 inject 要放到 data 之前，否則會報錯，報錯原因有待研究。。

  inject: ['reload']
  

• 然后再需要的地方調用即可

  refresh () {
    this.reload()
  }
  

  這種方法不論子組件有多深，只要調用了inject那么就可以注入provide中的數據。

完整代碼

App.vue

<template>
  <div id="app">
    <div class="wrap">
      <router-view v-if="isRouterAlive"></router-view>
    </div>
  </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>

要使用的組件：

<template>
  <button @click="refresh"></button>
</template>
<script>
  export default{
    name: 'refresh',
    inject: ['reload'],
    methods: {
      refresh () {
        this.reload()
      }
    }
  }
</script>

-----------不仔細導致的問題，記錄一下----------

• 控制台報錯 this.reload is not a funciton... 原因：App.vue 組件中已經有了 methods，但我沒仔細看於是多寫了一個 methods，reload() 方法被覆蓋

• 控制台報錯 Maximum call stack size exceeded 原因： inject:['reload'] 放在了 data 下面導致。

  ​
  本文轉自：https://www.jianshu.com/p/b6d7db35b6e4