vue 实现当前页的刷新

在做项目时， 想要登录成功后直接刷新当前页面，于是找了几个方法，在这里记录一下，以免忘记。

this.$router.go(0) 
//  在刷新时，页面会有一瞬间的白屏，用户体验极差。。
location.reload()
//  这个也是一样

最终采用了 vue 里的 provide/inject 方法，先介绍一下这个方法：

这个方法，需要一起使用，允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。
provide: 为一个 对象 或 函数，
inject: 为一个 字符串数组 或 对象。

下面放上代码：
在 app.vue里：具体思想就是通过控制 router-view 的显示或隐藏，来实现页面的加载

<template>
	<div id="app">
  		<router-view v-if="isRouterAlive"/>
	</div>
</template>

export default {
  data() {
    return {
      'isRouterAlive': true,
    }
  },
  provide () {
    return {
      reload: this.reload
    }
  },
  methods: {
	reload() {
      this.isRouterAlive = false;
      this.$nextTick(function () {// 下一次 dom 更新后的回调
        this.isRouterAlive = true;
      })
    }
  }
}

接下来只需要在 需要刷新的页面注入 provide 提供的 reload 依赖即可，

// 我的是在login.vue 里：
export default {
	inject: ['reload'],
	methods: {
		// 刷新页面
		refresh() {
			this.reload();
		}
	}
}