vue项目优雅地刷新当前页面

作者: bkbtp 分类: 前端 发布时间: 2018-06-10 14:59

在项目中,有时候会遇到需要刷新当前页面的需求,这个时候,最直接的方法就是使用 router.go(0) 或者 window.reload(),但是这样会导致页面闪烁,体验非常不好。并且,通常需要进行刷新操作的场景,会让你弹出一个提示框,类似,’xx已成功’之类的,此时,message框是一个异步的操作,而刷新是一个同步的操作,并无法保证提示框每次都能适时地出现。

下面介绍两种优雅的刷新页面方案

方案一、provide / inject 组合

provide 选项允许我们指定我们想要提供给后代组件的数据/方法,然后在任何后代组件里,我们都可以使用 inject 选项来接收指定的我们想要添加在这个实例上的属性。
这对选项需要一起使用,以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效。

  1. 修改 app.vue 文件,声明 reload 方法
<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(() => {
        this.isRouterAlive = true
      })
    }
  }
}
</script>

<style>
</style>
  1. 在页面注入 App.vue 组件提供的 reload 依赖,在需要刷新的地方,使用 this.reload() 即可
export default {
  inject: ['reload'],
  data () {
    return {
    }
  },
  methods: {
    toReload() {
      // ...
      this.reload()
    }
  }
}

方案二、在需要刷新的时候跳转到一个空白页,然后再迅速跳回来

  1. 比如当前页面name为abc,在需要刷新的地方添加如下代码
    this.$router.replace('/blank')
  2. 在预先备好的空白页面加入如下代码
export default {
  data() {
    return {
    }
  },
  created() {
    this.$router.replace({ name: 'abc' })
  }
}

发表评论

电子邮件地址不会被公开。 必填项已用*标注

知识共享许可协议
本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。