Vue如何动态刷新当前页面

本文来自于：https://www.cnblogs.com/yinn/p/9056731.html
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"/>
	</div>
	<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
					})
				}
			}
		}

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

	}
	inject: ['reload'], //注入reload方法
	name: "reload test",
	methods:{
		methodSubmit(){
			//do something
			this.reload()   //直接调用进行当前页面刷新
		}
	}
}

4.provide / inject 用法

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

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

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