使用Vue刷新当前页面数据「建议收藏」

大家好，欢迎来到IT知识分享网。

常常会遇到在删除或者增加一条数据的时候想要刷新页面来显示数据这里提供两种方式

方法一: 整个页面刷新

• location.reload() ①
• this.$router.go(0) ②

相当于强制刷新页面整个页面刷新,会有一瞬间空白

方法二: provide / inject 组合 方式

首先需要修改app.vue

<template>
  <div id="app">
    <router-view v-if="isRouterAlive"></router-view>
  </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>

通过声明reload方法，控制router-view的显示或隐藏，从而控制页面的再次加载，这边定义了

isRouterAlive 通过true or false 来控制

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