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>