1.场景

在处理列表时，常常有删除一条数据或者新增数据之后需要重新刷新当前页面的需求。（如果是通过查询接口来刷新页面，就可以直接在删除或者新增最后再次调用查询接口即可）

2.遇到的问题

1.用vue-router重新路由到当前页面，页面是不进行刷新的

2.采用window.reload()，或者router.go(0)刷新时，整个浏览器进行了重新加载，闪烁，体验非常不好

3.解决方法

provide / inject 组合

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

App.vue:

声明reload方法，控制router-view的显示或隐藏，从而控制页面的再次加载

<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>

在页面注入App.vue组件提供（provide）的 reload 依赖，在逻辑完成之后（删除或添加…）,直接this.reload()调用，即可刷新当前页面。

<script>
export default {
  inject:['reload'],
}
  methods:{
	add(){
		this.reload();
	}
  }
</script>

4.provide / inject 用法

provide：选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的属性。

inject：一个字符串数组，或一个对象，对象的 key 是本地的绑定名

提示：provide 和 inject 绑定并不是可响应的。这是刻意为之的。如果你传入了一个可监听的对象，那么其对象的属性还是可响应的。

5.注意事项

不能在生命周期中调用！！！否则会一直在重新调用，只能在添加或删除这样类似的操作中。