前端不闪屏刷新页面

前几天同事问了我一个问题，就是他登录和退出写成了一个悬浮在右侧的小组件，登录之后变成用户名和个人中心，退出之后变成登录。但是数据是存在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这两个用法的说明，贴上地址：

参考文献：https://cn.vuejs.org/v2/api/#provide-inject

https://cn.vuejs.org/v2/guide/components-edge-cases.html#%E4%BE%9D%E8%B5%96%E6%B3%A8%E5%85%A5