vue项目刷新当前页

provide / inject

描述

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

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

作用

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

需要关注的是

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

具体使用

在祖先组件里声明并提供 刷新 方法，并 v-if 来设置是否重新渲染

<!-- 祖先组件 -->
<template>
	<div id="ancestor">
		<router-view v-if="showPage"></router-view>
	</div>
</template>

export default {
	name: 'ancestor',
	//	提供子孙可注入的依赖
	provide() {
		return {
			reload: this.reload
		}
	},
	data() {
		return {
			showPage: true
		}
	},
	methods: {
		reload() {
			this.showPage = false;
			//	在下次 DOM 更新循环结束之后执行延迟回调。
			//	在修改数据之后立即使用这个方法，获取更新后的 DOM。
			this.$nextTick(() => { 
				this.showPage = false;
			})
		}
	}
}

子孙组件里通过注入的方法调用祖先组件里的方法实现刷新当前页.

export default { 
	//	注入祖先组件提供的reload
	inject: ['reload'],
	methods: {
		setPageReload() {
			//	调用祖先组件的reload方法
			this.reload();
		}
	}
}

采用 provide / inject 原因

1. 用 vue-router重新路由到当前页面，页面组件不会更新状态

2. 采用window.reload()，或者 router.go(0)刷新时，浏览器会重新加载系统，造成页面闪烁等