文章目录
效果
所需技术
- vue
- VueRouter
- vuex
- element ui
思路
- 封装 NavMenu 组件和 tabs 组件
- 使用 vuex 进行组件间的通信
- router-view 放到 tabs 组件中
- 使用 sessionStorage 记录 NavMenu 选中和 tabs 激活的状态
vuex 文件划分
这是我对 vuex 做了拆分
- index.js vuex入口文件
- actions.js 处理组件分发过来的回调函数
- 一般是 this.$store.dispatch(‘函数名’[,实参])
- 一般是 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"