Vue-刷新页面

1、provide、inject方法

        通过provide与inject，可以把一个祖先组件指定的数据和方法，传递给其所有子孙代。        

        父组件A ---- 通过provide指定传递给子孙组件的值：

export default {
  provide() {     // provide是一个匿名函数，返回一个对象
    return {
      reload: this.reload，
      msg:this.msg      
    };
  },
  data(){
    return {
      msg:'test111' 
   }
  },
  methods: {
    reload() {
      console.log("test222");
    },
  },
},

        子/孙组件 ---- 通过inject 获取祖先组件传递过来的值：

export default {
 //inject: ["reload","msg"], // 简写
  inject:{   // 详细指定来源以及默认值
     msg:{
        from:'A',   //表示从组件A传递过来的
        default:'a default msg'
     },
     reload:{
        from:'A'
     }
  },
  mounted() {
    this.reload();
  },
},

2、刷新页面

（1）provide + inject方法（最推荐）

        通过声明reload方法，控制router-view的显示或隐藏，从而控制页面的再次加载。

        app.vue文件代码：

<template>
    <h-page id="app">
        <router-view v-if="isRouterAlive" />
    </h-page>
</template>
<script>
  export default {
    name: 'App',
    data() {
        return {
            isRouterAlive: true
        }
    },
    provide(){
        return {
            reload: this.reload
        }
    },
    methods: {
        reload(){
            this.isRouterAlive = false;
            this.$nextTick(()=>{
                this.isRouterAlive = true;
            })
        }
    },
  }
</script>

        然后在需要当前页面刷新的页面中注入App.vue组件提供（provide）的 reload 依赖，直接调用用this.reload。

<template>
    <div>
        <span class="iconfont icon-shuaxin" @click="reload"></span>
    </div>
</template>
<script>
    export default {
        inject: ['reload'],
    }
</script>

（2）location.reload()

        下面两种都可以刷新当前页面的，缺点整个页面会重新加载，会出现一个瞬间的空白页面，体验不好。

<template>
    <div>
        <span class="iconfont icon-shuaxin" @click="handleReload"></span>
    </div>
</template>
<script>
    export default {
        methosd： {
            handleReload() {
                location.reload();
            }
        }
    }
</script>

（3）this.$router.go(0);

<template>
    <div>
        <span class="iconfont icon-shuaxin" @click="handleReload"></span>
    </div>
</template>
<script>
    export default {
        methosd： {
            handleReload() {
                this.$router.go(0);     
            }
        }
    }
</script>