vue项目刷新当前页面的方法

使用Vue-Router在进行路由配置时会带来的问题？
1、重新进入当前路由，页面不进行刷新。
2、在进行列表数据操作时：新增、删除、编辑时需要刷新当前页面。
下面是解决方法
方法一：强制刷新整个页面
1、使用this.$router.go(0)函数，可以强制刷新当前页面
2、使用window.location.href 或者window.location.reload 刷新当前页面
这两种方法会出现页面闪烁，会极大降低用户体验。
方法二：借助vue的选项/组合（provide/inject ）
这对选项要组合一起使用，以允许一个祖先组件向其所有子孙后代组件注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里生效 – 引自Vue.js官网描述

	// App.vue组件
	<template>
	  <router-view v-if="isShow" />
	</template>
	<sciprt>
	 export default () {
	    name: 'App',
	    data () {
	      return {
	        // 控制router-view的隐藏与展示
	        isShow: true
	      }
	    },
	    
	    // 提供可注入子组件属性
	    provide () {
	      return {
	        reload: this.reload
	      }
	    },
	
	    // 定义reload方法
	    methods: {
	      reload () {
	        // 先隐藏
	        this.isShow = false
	        
	        // $nextTick() 将回调延迟到下次 DOM 更新循环之后执行
	        this.$nextTick(() => {
	          this.isShow = true
	        })
	      }
	    }
	  }
	</script> 

	// NavBar.vue 导航组件
	<template>
	  <div class="nav-bar">
	    // 一定要添加.native修饰符，默认router-link阻止了a链接的默认事件
	    <router-link :to="{name: 'Index'}" @click.native="showRouter">首页</router-link>
	    <router-link :to="{name: 'Index'}" @click.native="showRouter">首页</router-link>
	  </div>
	</template>
		
	<script>
		export default {
		  name: 'NavBar',
		  // 接收注入的数据
		  inject: [
		    'reload'
		  ],
		  methods: {
		    showRouter () {
		      // 调用reload方法，刷新整个页面
		      this.reload()
		    }
		  }
		}
	</script>