vue——执行增删改操作后刷新页面

一、使用场景

使用vue开发管理后台页面，执行增加删除修改的功能后，列表并不会马上显示最新的数据，需要刷新当前页面获取到最新的数据，但使用window.reload( ) 或 router.go(0)的话整个浏览器会重载，用户体验不太友好。

那么推荐使用provide / inject 的方法来解决这个需求。

二、provide/inject方法

vue官方文档：这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。

大概意思就是：在父组件中声明好provide后，后面无论多深层级的页面，都可以通过引用inject来使用父组件的方法

三、代码实现

1、首先在App.vue页面引入provide，控制router-view的显示和隐藏来实现刷新页面

<template>
  <div id="app">
    <router-view v-if="isRouterAlive" />
  </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>

2、在你需要刷新的vue页面中引入inject

inject:['reload']

3、在执行增删改操作成功后，调用父组件的reload方法实现刷新页面