Vue刷新页面的三种方式

最近碰见一个需要重新刷新加载当前页面的需求，对此总结几个常用的vue刷新页面的方式

1.原生的js刷新方式：

location.reload();

2.vue自带的路由跳转方式：

this.$router.go(0);

使用过后发现这俩种方式都会使页面有短暂的空白，体验效果不是特别好所以总结出了第三种方式
3. 在app或者路由插槽处声明以下代码：

template>
    <div id="app">
    	<router-view v-if="isShow"></router-view>
	</div>
</template>
<script>
    export default {
        name: 'App',
        provide () {
        //父组件中通过provide来提供变量，在子组件中通过inject接受。                                             
            return {
                reload: this.reload                                              
            }
        },
        data() {
            return{
            //自定义参数
                isShow: true
            }
        },
        methods: {
            reload () {
            //reload方法首先将isShow设置为false，将router-view通过if判断取消
                this.isShow= false;
            // Vue.nextTick用于延迟执行一段代码，它接受2个参数（回调函数和执行回调函数的上下文环境），如果没有提供回调函数，那么将返回promise对象。
                this.$nextTick(function () {
           //     在页面更新后再将isShow设置为true
                    this.isShow= true;
                }) 
            }
        }，
    }
</script>

组件中设置刷新

export default {
    inject:['reload'],//  此处引入在app中定义的reload方法
    data () {
        return {
        }
    }
},

在页面中需要页面刷新的地方调用即可

this.reload();