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

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

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

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

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

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

步骤：

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

第一步

在app.vue里面设置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<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调用：

1
2
3
4
5
6
7
8
<script>
export  default{
    inject:['reload'],
    mounted(){
        this.reload();
    }
}
</script>

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