关于Vue中使用原生reload刷新页面方法

reload()方法用于刷新当前文档。
reload() 方法类似于你浏览器上的刷新页面按钮。
可以在必要的时候使用此方法 但在vue项目中直接使用reload()方法刷新页面是无效的并还会报错 是因为我们并没注入相关依赖
使用inject方式注入
首先在app.vue的文件中插入 并配置成全局

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

}
</script>

然后在需要的页面中使用inject注入

  inject: ['reload'],

代码块

<template>
    <button @click="check">刷新页面</button>
</template>
export default {
  inject: ['reload'],
  data() {
    return {
      }
    }
  },
  created() {
  },
  methods: {
  //刷新页面
    check() {
    this.reload()
    }
  }
}
</script>

猜你喜欢

转载自blog.csdn.net/qq_41193701/article/details/103512768
今日推荐