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 是本地的绑定名