Vue项目中微信浏览器页面刷新问题

运行在微信浏览器中的Vue项目，当需要用户主动对页面进行刷新时，会遇到如下问题：

• 微信不支持location.reload()方法，在微信浏览器中会失效
• Vue中的路由跳转是类似于ajax局部刷新，因此使用location.href=‘xxx+时间戳’ 这种方法时，页面不会重载
• Vue自带的this.$router.go(0)无效
• history.go(0)无效

通过后来的研究和学习，找到了一种解决办法，简单来说就是控制app.vue下的路由视图的显隐来控制页面的更新
那么问题是所在的位置是父组件App.vue文件里，而需要刷新的页面是一个子文件，子文件应该如何控制父组件中的的显隐呢

provide/injct

provide

用于在某一父组件向其所有子孙组件中注入依赖，其所有子孙（只要有上下级关系，不管层次多深)都可以调用

inject

用于在子组件中调用其某一父组件中provide中的值

具体用法

在App.vue中，先在provide中注册一个用于页面重载的方法

<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>

然后在子页面中直接调用reload这个方法就可以了

 inject: ['reload'],
 data(){
 	return {...}
 },
 method:{
 	removePerson(){
		。。。。。。。
       
        this.reload()
        
        。。。。。。。
     },
  }