vue无痕刷新组件

在vue项目中，很多场景需要我们刷新组件，一般常用的两种刷新方法：

    window.location.reload()，原生 js 提供的方法；

    this.$router.go(0)，vue 路由里面的一种方法；

这两种方法都可以达到页面刷新的目的，简单粗暴，但是用户体验不好，相当于按 F5 刷新页面，页面的重新载入，会有短暂的白屏。

那么，怎么实现无痕刷新呢？

原理：

先在全局组件注册一个方法，用该方法控制router-view的显示与否，然后在子组件调用。

步骤：

1. v-if控制<router-view></router-view>的显示。
2. provide：全局注册方法。
3. methods：设置reload方法。
4. 在子组件中使用inject插入父组件的刷新方法。

第一步

在app.vue里面设置：

<template>
    <div id="app">
            <router-view v-if="refresh"></router-view>
    </div>
</template>
<script>
export  default {
    provide(){
        return{
            reload:this.reload
        }
    },
    data(){
        return {
            refresh: true
        }
    },
    methods:{
        reload(){
            this.refresh = false;
            this.$nextTick(function(){
                this.refresh = true;
            })
        }
    }
}
</script>

在.vue子组件中使用，先用inject注册，然后即可通过this调用：

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

如此，就可以随时刷新当前组件了！