Vue添加自动刷新功能

前言
        在实际开发中，当页对数据库进行增删改的过程中，vue不会对DOM进行渲染，因此要用刷新来重新查询显示这些数据。
        解决方法就是用provide / inject 组合，其作用是允许一个祖先组件向其所有子孙后代组件注入一个依赖，不论组件层次有多深，在上下游关系成立的时间里始终生效。因此会想到App.vue是所有页面的父组件及组件的祖先组件，所以肯定跟App.vue有关系。

解决方案

        打开App.vue ： 声明reload方法，控制router的显示或隐藏，从而控制页面的再次加载。

<!--App.vue-->
<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>

        子孙组件：
                利用 inject 在页面注入App.vue组件提供（provide）的 reload 依赖，在逻辑代码完成后（增删改）直接this.reload(); 调用即可刷新当前页面。

<script>
	
	export default{
		name:'home',
		inject:['reload']//在根节点上写
		methods:{
			deleteStudent(){
				//...请求后台进行删除操作
				//刷新页面
				this.reload();
			}
		}
	}
</script>