Vue 使用 reload 刷新当前页面

场景

在处理列表时，常常有删除一条数据或者新增数据之后需要重新刷新当前页面的需求。

解决问题

1. 用vue-router重新路由到当前页面，页面是不进行刷新的

2. 采用window.reload()，或者router.go(0)刷新时，整个浏览器进行了重新加载，闪烁，体验不好

解决方法

provide / inject 组合

作用：允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。

<template>
    <el-container>
        <el-main>
            <router-view v-if="isRouterAlive" />
        </el-main>
    </el-container>
</template>
<script>
import Vue from 'vue';
import Component from 'vue-class-component';
export default @Component({
    provide() {
        return {
            reload: this.reload,
        };
    },
})
class Main extends Vue {
    isRouterAlive = true;

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

在使用reload的页面：

import Vue from 'vue';
import Component from 'vue-class-component';

export default @Component({
    inject: ['reload'],
})
class Child extends Vue {
    handleSwitchOrg() {
        this.reload();
    }
}
</script>