Vue+Element-UI菜单二次点击刷新方法，且只刷新页面表格区域

  最近在开发一个Vue + Element-UI的项目，发现Element-UI中的NavMenu 导航菜单点击已选中的菜单时刷新不了页面，上网找到一些相关资料进行改进，实现二次点击菜单时能够无闪烁刷新页面，且只刷新表格区域。

项目中采用的是Container 布局容器，如下：

父组件中：

<el-container>
  <el-aside>
 	 <SideMenu></SideMenu>
  </el-aside>
  <el-container>
    <el-header>
    	<Header></Header>
    </el-header>
    <el-main>
    	<router-view v-if="isRouterAlive"></router-view>
    </el-main>
  </el-container>
</el-container>

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

其中 SideMenu 和 Header 是自己写的子组件，这里就不展示出了，我想一般的项目都会把侧边栏和导航栏分离出，读者可以更改成自己的。
需要注意一下 provide () 目的是在父级组件中提供定义在此处的reload函数
别忘了标签中的v-if

子组件中：

<el-menu @select="handleSelect"></el-menu>
<script>
export default {
  inject: ['reload'],
  name: 'SideMenu',
  data () {
    return {
    }
  },
  methods: {
    handleSelect (index) {
      if (index === this.$route.path) {
        this.reload()
      }
    }
  }
}
</script>

在侧边栏子组件中加入菜单激活回调事件@select="handleSelect"，然后定义handleSelect()方法
需要注意一下 inject 目的是在子组件中注入父组件定义的reload函数，这样在子组件中就能直接使用this.reload()调用父组件中的reload()方法。

关于provide / inject 介绍可以阅读 provide / inject 了解一下

关于$nextTick介绍可以阅读 nextTick( [callback] ) 了解一下

参考资料