Vue之 点击刷新当前页面

参考
https://blog.csdn.net/weixin_42088314/article/details/109464498

效果图

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

1 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 lang="stylus" scoped>
</style>

2 src/layout/compoent/Navbar.vue

<el class="avatar-container right-menu-item hover-effect" @click="refresh" ><i class="el-icon-refresh"></i>
  </el>
<script>

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

另

vue-element-admin项目中实现刷新tab标签不丢失

参考 https://blog.csdn.net/weixin_35958891/article/details/103492043