【VUE中实现点击按钮刷新页面的方法】

VUE中实现点击按钮刷新页面的方法

• vue中provide和inject 用法
• 通过依赖注入实现页面刷新
• 源码片段：

这里先介绍两种简单粗暴的刷新页面方法，但会有较长的白屏时间，比较影响用户体验，并不推荐：
第一种：

window.location.reload();

第二种：

this.$router.go(0)

下面进入正题，也是我们刷新页面比较推荐的方式

vue中provide和inject 用法

首先我们需要先了解一下vue中的依赖注入provide 和 inject
概念：

作用：用于父组件向子孙组件传递
使用方法：provide在父组件中返回要传给下级的数据，inject在需要使用这个数据的子辈组件或者孙辈等下级组件中注入数据，这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在其上下游关系成立的时间里始终生效。

通过依赖注入实现页面刷新

首先对app.vue中的内容进行修改

通过reload方法控制变量showRouter的值，在router-view中使用v-if来控制其添加和删除，从而使页面再次加载。然后在需要刷新的页面引入前面在app.vue中提供的reload依赖，在调用reload方法既可实现：

源码片段：

app.vue：

<template>
  <div id="app">
    <router-view v-if="showRouter"></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
  provide (){
    return {
      reload: this.reload
    }
  },
  data (){
    return {
      showRouter: true
    }
  },
  methods: {
    reload (){
      this.showRouter = false
      this.$nextTick(function(){
        this.showRouter = true
      })
    }
  }
}
</script>

<style scoped>

</style>

需要刷新的页面vue组件：

<template>
	<div class="refresh" title="刷新" @click="refresh"><i class="el-icon-refresh"></i></div
</template>


<script>
export default {
  inject: ['reload'],
  name: "refresh",
  methods: {
    refresh() {
      this.reload()
    }
  }
};
</script>
<style scoped>


</style>