vue 刷新界面 解决闪屏和iOS失效问题

vue中:

1 this.$router.go(0)。这种方法虽然代码很少,只有一行,但是体验很差。页面会一瞬间的白屏,体验不是很好,关键是 在ios系统中会失效

2 用vue-router重新路由到当前页面,页面是不进行刷新的。

3 location.reload()。这种也是一样,画面一闪,体验不是很好

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

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

解决方法:

1、在路由处:

<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(function () {
        this.isRouterAlive = true
      })
    }
  }
}
</script>

2、在需要刷新的界面 ,注入 inject: ['reload'],

  export default {
  name: 'app',
  inject: ['reload'],
  data () {
    return {
    }
  },

3、在需要刷新的地方
this.reload()

参考文章:https://segmentfault.com/a/1190000017007631
https://blog.csdn.net/niesiyuan000/article/details/92791071

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容