vue-admin-element的全局按钮添加

有天业务测试来找我，说希望在列表页加一个刷新按钮-。-
其实这个页面的各个生命周期钩子里都加了刷新操作的回调函数，除此之外，table-row中的全部button也绑定了相同的方法—为的就是希望实时刷新结果（恨不能挂个websocket上去)
所以我很诧异，为啥还要单独添加一个独立于各种区块的按钮呢？她说就觉得方便···
众所周知，我是一个爱惜页面整洁性的人，所以我准备加一个全局刷新按钮，就在odin后台的顶部！
同时也因为这个项目的侧边栏渲染是基于比如oom模块：
src/router/modules/oom.js中的

import Layout from '@/layout'

const oomRouter = {
  path: '/oom',
  component: Layout,
  redirect: '/oom/index',
  name: 'oom自动化分析',
  // hidden: true,
  meta: {
    title: 'oom自动化分析',
    icon: 'tree-table',
    roles: ['admin']
    // affix: true
  },
  children: [
    {
      path: 'index',
      component: () => import('@/views/oom/index'),
      name: 'oom-index',
      // hidden: true,
      meta: { title: '管理首页', icon: 'guide', noCache: true }
    },
    {
      path: 'list',
      component: () => import('@/views/oom/list'),
      name: 'oom-list',
      // hidden: true,
      meta: { title: '任务列表', icon: 'nested', noCache: true }
    }
  ]
}
export default oomRouter

所以我明显需要在Layout中添加元素和方法，而进去发现它是以组件的方式使用Navbar的，所以在Navbar.vue中的

    <div class="right-menu">
      <template v-if="device!=='mobile'">
        <search
          id="header-search"
          class="right-menu-item"
        />
        <div
          class="right-menu-item hover-effect"
          style="font-size: 22px;"
          @click.stop="refresh()"
        ><i class="el-icon-refresh" /></div>
        .
        .
        .

之后注入依赖，最后加入我的刷新图标，并绑定了refresh()方法

export default {
  inject: ['reload'],
  .
  .
  .
  methods: {
    refresh() {
      // this.$router.go(0)
      this.reload()
    }
    .
    .
    .

这里的this.reload()需要用到provide / inject的知识了，简单来说就是provide / inject这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。！！！
那么我要在哪个祖先组件中注入呢？显然是App.vue

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

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

reload方法只是触发了一下<router-view v-if="isRouterAlive" />的隐藏与显示的切换，但是这样就可以触发vue的重新渲染，并且不会整体刷新，也会重新触发生命周期函数，这样就实现了全局按钮的刷新操作啦！！！

参考链接

vue项目刷新当前页面的三种方法