vue项目中我们很多时候需要刷新页面，比如本地用户信息更新后，或者需要重新加载当前页面的数据时，使用window.location.reload()或者window.history.go(0)方法都是整个窗口的刷新，和h5快捷键一样，会有短暂空白出现，体验很不好，这里说两种在vue项目里使用的无感知刷新页面方法：

一、provide/inject方法

父组件中provide提供的属性可以在任何子组件里通过inject接收到，那么我们在App页面动态改变总路由的显示和隐藏来达到刷新的效果。在App页面定义一个reload方法：

App.vue

        reload() {
            this.defaultActive = false;
            this.$nextTick(() => {
                this.defaultActive = true;
            });
        }

defaulActive用于控制页面的显影:

<template>
    <div id="app">
        <router-view v-if="defaultActive" />
    </div>
</template>

provide提供子组件访问的入口:

    provide() {
        return {
            reload: this.reload
        };
    }

在需要刷新的页面通过inject接收到该全局方法：

page.vue

inject: ["reload"]

需要刷新的时候调用该方法：
 

        refresh() {
            this.reload();
        }

全部代码：

App.vue:

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

page.vue

<script>
export default {
    inject: ["reload"],
    data() {
        return {};
    },
    methods: {
        refresh() {
            this.reload();
        }
    }
};
</script>

二、中间页面重定向

可以新建一个页面reload.vue,当page.vue需要刷新的时候，将路由指向reload页面，再跳转回page页面，由于页面的key发生了变化，所以页面会被刷新

page.vue:

        refresh() {
            const { fullPath } = this.$route;
            this.$router.replace({
                path: "/redirect",
                query: { path: fullPath }
            });
        }

reload.vue:

<script>
    export default {
        name: "reload",
        props: {},
        beforeCreate() {
            const { query } = this.$route;
            const { path } = query;
            this.$router.replace({
                path: path
            });
        },
        render(h) {
            return h();
        }
    };
</script>