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

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

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

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()
        
        。。。。。。。
     },
  }
Logo

前往低代码交流专区

更多推荐