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

解决方案：

一:

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

window.location.reload();

第二种：

this.$router.go(0)

 二:

在app.vue里新增以下代码

 三:

在自己的主页面添加按钮

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

 这是源码

<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>
#app {

}
/* 选中某行时的背景色*/
.el-table__body tr.current-row > td {

background-color: #92cbf1 !important;
}
</style>
 

<template>
<el-button type="success" icon="el-icon-refresh" @click="refresh" size="mini">刷新</el-button>
</template>

methods: {
            refresh() {
                  this.reload()
                },
}