iview 表格隨着更改刷新

使用location.reload()

或者是

路由的 this.$router.go(0)

進行刷新的時候，是會出現一陣的空白區域的，因為是整個頁面的刷新

，所以比較緩慢，因此使用了provide/inject的方法。

 

在App.vue中寫入以下代碼：

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

<script>
export default {
  name: "app",
  //提供一個依賴
  provide(){
    return {
      reload:this.reload
    }
  },
  data(){
    return {
      isRouterAlive:true
    }
  },
  //聲明reload方法，控制router-view的顯示或隱藏，從而控制頁面的再次加載
  methods:{
    reload(){
      this.isRouterAlive = false;
      this.$nextTick(function(){
        this.isRouterAlive=true
      })
    }
  }
};
</script>

<style>
.size{
　　width:100%;
　　heigth:100%;
}
html,body{
.size;
  margin: 0;
  padding: 0;
}
#app {
 .size;
}
</style>

 

子頁面引用

<script>
export default {
   inject:['reload'] ,
   methods:{
       reload(){
        this.reload()
       }
   }
}
</script>

provide：選項應該是一個對象或返回一個對象的函數。該對象包含可注入其子孫的屬性。

inject：一個字符串數組，或一個對象，對象的 key 是本地的綁定名