美文网首页
相同路由跳转问题,优化解决方案

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

作者: d34skip | 来源:发表于2018-08-02 09:17 被阅读0次

    相同路由跳转时,会产生页面不动的状态,所以我们需要一个点击切换类刷新的效果,这种解决方法主要有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()
        }
      }
    }
    

    相关文章

      网友评论

          本文标题:相同路由跳转问题,优化解决方案

          本文链接:https://www.haomeiwen.com/subject/mgxjvftx.html