相同路由跳转问题,优化解决方案

相同路由跳转时,会产生页面不动的状态,所以我们需要一个点击切换类刷新的效果,这种解决方法主要有3个;
但是前2个方案,用户体验略低。


1,整个页面重新刷新;

location.reload()// or ’this.$router.go(0)‘

这两种都可以刷新当前页面的,缺点就是相当于按ctrl+F5 强制刷新那种,整个页面重新加载,会出现一个瞬间的空白页面,体验不好。


2,新建一个空白页面supplierAllBack.vue,点击确定的时候先跳转到这个空白页,然后再立马跳转回来;
这个方式,相比第一种不会出现一瞬间的空白页,只是地址栏有个快速的切换的过程,可采用。


3,provide / inject 组合 方式是我试过最实用的
首先,要修改APP.vue

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

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

然后在需要当前页面刷新的页面中注入App.vue组件提供(provide)的 reload 依赖,然后直接用this.reload来调用就行

export default {
  name: 'index',
  inject: ["reload"],
  methods: {
    xxx () {
     // 需要调用的方法
      this.reload()
    }
  }
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 效果图展示: 在众多的APP中都会有这样一种视图,去展示重点推荐,热门资讯等内容。在实现的过程中,尝试了几种不同的...
    wright阅读 1,019评论 1 7
  • 客户爸爸求求您别老说,我想要一个类似网易云音乐这样可以引爆用户和市场的事件营销。想和您在基于产品和市场策略再次...
    二二陈阅读 267评论 0 1
  • 直接上方案。 首先,放心大胆的pod yykit和sdwebimage/webp,像这样pod.png 其次像这...
    莫道别离伤阅读 3,189评论 3 0
  • 今天7点半,老妈第一次出门上班,心理五味杂陈。
    花圆子阅读 160评论 0 0
  • 有的东西就像糖炒栗子一样,外表如故,和周围的栗子一起,香气也如故,表面上一切正常,也仅仅是表面上。内底逐渐腐烂你也...
    溪兮子爱思考阅读 243评论 0 0