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

最新推荐文章于 2024-10-28 14:37:25 发布

IsQtion

最新推荐文章于 2024-10-28 14:37:25 发布

阅读量5.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： Javascrip

本文链接：https://blog.youkuaiyun.com/Lucky_Q/article/details/89097423

Javascrip 专栏收录该内容

20 篇文章

订阅专栏

本文介绍了一种针对运行在微信浏览器中的Vue项目的刷新方法。由于微信浏览器限制了某些刷新API的功能，文章提出了一种通过控制<router-view>显示与隐藏的方式来实现页面刷新的解决方案，并详细解释了如何在子组件中调用父组件提供的刷新方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

运行在微信浏览器中的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()
        
        。。。。。。。
     },
  }