vue项目如何刷新当前页面

vue项目刷新当前页面，可能这已经不是个问题，目前大家知道的有应该最少有两种解决方案：

localhost.reload() 

或

this.$router.go(0)

如上是在遇到刷新时最直接能想到的方法，但是这个方法有个弊端就是刷新页面会导致空白页面的出现，这样的用户体验很不好；如上这样一个布局我们只需要重新让“main”区域组件进行重新reload，这时恰巧这个区域是一个router-view组件进行渲染的，那么我们提高一下用户体现可以用如下方法实现：

<div id="app">
    <el-container>
      <el-header>
        <Header></Header>
      </el-header>
      <el-row :gutter="20" class="zvip-cont">
        <el-col :span="4" class="zvip-left">
          <Aside />
        </el-col>
        <el-col :span="20" class="zvip-right">
          <router-view v-if="isReload"></router-view> //此处进行判断渲染
        </el-col>
      </el-row>
    </el-container>
  </div>
provide() { // 利用vue的provide方法
    return {
      reload: this.reload
    }
  },
  data() {
    return {
      isReload: true
    }
  },
methods: {
    reload() {
      this.isReload = false
      this.$nextTick(function() {
        this.isReload = true
      })
    }
  }

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

export default {
  inject: ["reload"],
  methods: {
    routerReload(val) {
      this.reload()
    },
  }
}

在众多刷新的方法里这个方法目前是个人觉得体验最好的一种，当然可能还有其他的方式，但目前我还没有先到，欢迎交流

ithack / ithack.github.io

vue项目如何刷新当前页面 #12