前几天同事问了我一个问题，就是他登录和退出写成了一个悬浮在右侧的小组件，登录之后变成用户名和个人中心，退出之后变成登录。但是数据是存在store的，每次退出想清空数据，并刷新数据。
这时候，我首先就想到了，直接利用浏览器的location.reload()就可以解决问题，但是这个方法有一个弊端，就是它会闪屏，并且不会保证其他的组件keep-alive。
在经过了面向百度编程之后，发现了一个比较优的解决办法，今天记录一下。
利用Vue的provide和inject可以实现刷新不闪屏
（provide和inject是什么？点这里）
首先我们可以在根组件里这样写，在根组件的data里面声明一个变量来控制<router-view/>的显示隐藏，
<template>
<div id="app">
<router-view v-if="isRouterAlive" />
</div>
</template>
<script>
export default {
name: 'App',
data () {
return {
isRouterAlive: true
}
}
</script>
首先需要添加一个provide，需要注入的方法：
然后在添加一个methods，在里面写下控制页面刷新的代码：
（其实就是通过路由的显示和隐藏来对页面进行一个假的刷新效果）
<script>
export default {
// 根组件需要往后代组件注入的方法
provide () {
return {
reload: this.reload
}
},
methods: {
reload () {
this.isRouterAlive = false
this.$nextTick(() => {
this.isRouterAlive = true
})
}
}
}
根组件代码已经完成，然后在需要刷新页面的地方直接调用 this.reload()即可完成对页面的刷新，并且此操作不会像location.reload()一样闪屏。
export default {
// 引入根组件注入的刷新页面方法
inject: ['reload'],
methods: {
// 完成操作之后直接调用即可刷新页面
async successHandle() {
this.reload();
},
}
}
当然也有其他的办法实现这种需求，只是发现了这个之前并没有用过，所以在此记录一下。 其实Vue官方也有针对provide和inject这两个用法的说明，贴上地址：
