iview 表格随着添加刷新

Posted 2023-01-04 aknife

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