vue 刷新当前页面,使用this.$router.go(0)闪白问题（使用provide / inject）

当我们在项目的开发中，肯定会遇到做了某些操作(修改,删除)后需要刷新页面的时候

平常的刷新页面的方法:

1. this.$router.go()
2. location.reload()

上面的方法都是可以进行刷新但是屏幕都会闪白一下，体验极差

---

解决这种问题使用的方法

使用provide / inject

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

修改APP.vue文件

APP.vue

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

可以在页面中进行调用
注入reload方法

使用 this.reload()即可调用

参考博客:
https://segmentfault.com/a/1190000017007631

转载于：https://blog.csdn.net/qq_45632139/article/details/106313417