解决vue 刷新当前页面的问题

vue刷新当前页面不常用,在我的项目中还是有类似的需求,这里记录一下吧

在app.vue中添加刷新方法

<template>
  <div id="app">
    <router-view v-if="isRouterAlive" />//通过变量控制路由重新加载
  </div>
</template>

<script>
export default {
  name: 'App',
  provide() { // 父组件中通过provide提供reload,在子组件中通过inject来注入reload。
    return {
      reload: this.reload
    }
  },
  data() {
    return {
      isRouterAlive: true // 是否显示的变量,v-if会销毁组件
    }
  },
  methods: {
    reload() {
      this.isRouterAlive = false // 先关闭,
      this.$nextTick(function() {
        this.isRouterAlive = true // 再打开
      })
    }
  }

}
</script>

在页面调用时

添加注入
export default {
  inject: ['reload'],
  data() {}
}
方法调用
    handleClose() {
      this.reload()
    }

页面不会出现 location.reload() 或者 this.$router.go(0) 的闪烁问题,体验会好些。

  • 1
    点赞
  • 2
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 游动-白 设计师:白松林 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值