element-ui 点击NavMenut 动态渲染Tabs

效果

所需技术

1. vue
2. VueRouter
3. vuex
4. element ui

思路

• 封装 NavMenu 组件和 tabs 组件
• 使用 vuex 进行组件间的通信
• router-view 放到 tabs 组件中
• 使用 sessionStorage 记录 NavMenu 选中和 tabs 激活的状态

vuex 文件划分

这是我对 vuex 做了拆分

• index.js vuex入口文件
  
• actions.js 处理组件分发过来的回调函数
  • 一般是 this.$store.dispatch(‘函数名’[,实参])
    
• mutations.js 用于修改 vuex 中 getter 的值
• getters.js 用于存放计算属性的值

具体代码

Home.vue(总体组件)

<template>
  <el-container class="admin_container">
    <!-- 头部区域 -->
    <el-header><header-view></header-view></el-header>
    <!-- 页面主体区 -->
    <el-container class="content">
      <!-- 侧边栏 -->
      <el-aside width="200px">
        <aside-view></aside-view>
      </el-aside>
      <!-- 内容区 -->
      <el-main>
        <main-view></main-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import headerView from "./Header"
import asideView from "./Aside"
import mainView from './Main'

export default {
  components: {
    headerView,
    asideView,
    mainView
  }
}
</script>

Aside.vue(侧边栏组件)

<template>
  <div>
    <el-menu
      :default-active="$route.name"
      class="el-menu-vertical-demo"
      background-color="#fff"