VUE利用provide和inject实现页面局部刷新功能

功能需求：点击刷新时，路由保持在当前路由，不会t跳回到首页，当前路由下的页面局部刷新

实现原理：利用vue的provide和inject，它们成对出现，作用于父组件向子孙组件传递数据，provide在父组件中返回要传给下级的数据，inject在需要使用这个数据的子组件等下级组件中注入数据。
代码如下：
步骤1.先在APP.vue中修改

<template>
  <div id="app">
    <router-view v-if="isRouterActive" />
  </div>
</template>
<script>
	export default {
	  name: 'App',
	  provide(){
	    return{
	      reload:this.reload
	    };
	  },
	  data(){
	    return{
	      isRouterActive:true
	    };
	  },
	  methods:{
	    reload(){
	      this.isRouterActive=false;
	      this.$nextTick(function(){
	        this.isRouterActive=true;
	      })
	    }
	  }
	}
</script>

步骤2.
到需要点击刷新的页面进行引用即可（我项目中刷新是放在面包屑导航条里的，所以只需到相应的NavBar.vue中进行）

<template>
  <div class="navbar">
    <div class="right" @click="refresh" style="cursor:pointer;">
      <!-- 局部刷新 -->
      <i class="el-icon-refresh""></i><span>刷新</span>
    </div>
  </div>
</template>
<script>
	export default {
	  inject: ['reload'],
	  methods: {
	    // 刷新
	    refresh() {
	      this.reload()
	    },
	   }
	 }
</script>