关于vue项目刷新当前页面，获取数据改变后的页面

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

vue因为生命周期的原因，很多时候碰到这种情况：页面点击修改按钮，相应需要改变的数据不改变，只有F5情况下才能刷新数据已经修改后的页面。因为虽然点击了修改数据按钮，但是vue的生命周期已经执行完了，所以页面不会发生重绘了，这个时候我们需要在程序内写一行刷新当前页面的代码，一般回立马想到这两种：

1. location. reload()
2. this.$router.go(0)

这两种方式可以实现功能，但是缺点很明显，就是让整个页面重新加载，会出现一个瞬间的空白页面，体验很不好

这里提供一种方法可以很好的解决这种问题，用provide / inject 组合方式，直接上代码:

1. 首先你要修改下你的app.vue，像这样：

<template>
  <div id="app">
   <router-view v-if="isRouterAlive"></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
  provide(){
    return {
      reload:this.reload
    }
  },
  data(){
    return {
      isRouterAlive:true
    }
  },
  methods: {
    reload(){
      this.isRouterAlive=false
      this.$nextTick(()=>{
        this.isRouterAlive=true
      });
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* text-align: center; */
  color: #2c3e50;
   font-size:14px;
}
</style>

然后在需要刷新的代码页面的js中：

<script>
export default {
    inject:['reload'],
  	name:"demo"，
  	methods:{
  		getOut(){
  				this.reload()   //刷新当前页
  		}
  	}
}
</script>