vue 刷新當前頁面的方式

1.使用window.location.href window.location.replace() window.location.reload()

會出現空白，體驗不是很好

2.先進入一個空路由，然后返回

reflashPage(){
    let NewPage = '_empty' + '?time=' + new Date().getTime()/500;
    this.$router.push(NewPage);
    this.$router.go(-1);
}

刷新后點瀏覽器的前進按鈕會出現空白頁

3.使用 provide / inject

簡單的來說就是在父組件中通過provide來提供變量，然后在子組件中通過inject來注入變量。

app.vue

<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>

需要跳轉的頁面： 前面會有這個 inject

export default {
    inject:['reload'],
    data () {
        return {
        ...
        }
    },

后面想刷新當前頁面的地方這樣寫：

this.reload();

---

Vue是雙向數據綁定的，操作數據實時變化，大多情況不需要刷新頁面。
之前在做表單清空時用到了頁面刷新，表單的數據比較多逐個清空比較麻煩。
最近做頁面拖拽排版效果，使用了jq的插件操作dom沒有同時操作數據，導致數據和dom不一致，后來選擇用刷新頁面來做到統一。