还是从ElementUI用户指南中copy过来的，只做了一点修改，加了点样式
<template> <div class="aside"> <el-menu default-active="2" class="menu" @open="handleOpen" @close="handleClose"> <el-submenu index="1"> <template slot="title"> <i class="el-icon-location"></i> <span>数据展示</span> </template> <el-menu-item-group> <template slot="title">报表</template> <el-menu-item index="1-1">展示图一</el-menu-item> <el-menu-item index="1-2">展示图二</el-menu-item> </el-menu-item-group> <el-menu-item-group title=" 分组2"> <el-menu-item index="1-3">选项3</el-menu-item> </el-menu-item-group> <el-submenu index="1-4"> <template slot="title">选项4</template> <el-menu-item index="1-4-1">选项1</el-menu-item> </el-submenu> </el-submenu> <el-menu-item index="2"> <i class="el-icon-menu"></i> <span slot="title">导航二</span> </el-menu-item> <el-menu-item index="3" disabled> <i class="el-icon-document"></i> <span slot="title">导航三</span> </el-menu-item> <el-menu-item index="4"> <i class="el-icon-setting"></i> <span slot="title">导航四</span> </el-menu-item> </el-menu> </div> </template> <script> export default { data () { return { msg: 'Welcome to Your Vue.js App' } } } </script> <style scoped> .aside { height: 100%; overflow: hidden; } .menu { height: 100%; width: 100%; } </style>/router/index.js
import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld' import aside from '@/components/aside' # 引入自定义的组件且命名 Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'HelloWorld', component: HelloWorld, children: [ //子布局嵌套 { path: '', components: { aside: aside } }, ] } ] })/components/HelloWorld.vue
<template> <div class="main"> <el-container> <el-header>Header</el-header> <el-container> <el-aside width="10%"> <!-- 通过路由注入组件 --> <router-view name="aside"></router-view> </el-aside> <el-container> <el-main>main</el-main> </el-container> </el-container> </el-container> </div> </template>效果图
新增两个组件char1.vue 和 char2.vue
char1.vue
<template> <div class="char1"> 展示图一 </div> </template> <style scoped> .char1 { height: 100%; width: 100%; text-align: center; line-height: 160px; } </style>char2.vue
<template> <div class="char2"> 展示图二 </div> </template> <style scoped> .char2 { height: 100%; width: 100%; text-align: center; line-height: 160px; } </style>注册路由
/router/index.js
import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld' import aside from '@/components/aside' # 引入自定义组件 import char1 from '@/components/echars/char1' import char2 from '@/components/echars/char2' Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'HelloWorld', component: HelloWorld, children: [ { path: '', components: { aside: aside } }, { //注册路由，这里千万别写成/char1 path: 'char1', components: { aside: aside, main: char1 } }, { path: 'char2', components: { aside: aside, main: char2 } }, ] } ] })/components/HelloWorld.vue
<template> <div class="main"> <!-- 直接复制过来的 --> <el-container> <el-header>Header</el-header> <el-container> <el-aside width="10%"> <router-view name="aside"></router-view> </el-aside> <el-container> <el-main> //给main容器也添加上路由 <router-view name="main"></router-view> </el-main> </el-container> </el-container> </el-container> </div> </template>添加响应事件
aside.vue
<template> <div class="aside"> <el-menu default-active="2" class="menu" @open="handleOpen" @close="handleClose"> <el-submenu index="1"> <template slot="title"> <i class="el-icon-location"></i> <span>数据展示</span> </template> <el-menu-item-group> <template slot="title">报表</template> <!-- @click 点击响应事件 调用了jump函数 --> <el-menu-item index="1-1" @click="jump('/char1')">展示图一</el-menu-item> <el-menu-item index="1-2" @click="jump('/char2')">展示图二</el-menu-item> </el-menu-item-group> <el-menu-item-group title="分组2"> <el-menu-item index="1-3">选项3</el-menu-item> </el-menu-item-group> <el-submenu index="1-4"> <template slot="title">选项4</template> <el-menu-item index="1-4-1">选项1</el-menu-item> </el-submenu> </el-submenu> <el-menu-item index="2"> <i class="el-icon-menu"></i> <span slot="title">导航二</span> </el-menu-item> <el-menu-item index="3" disabled> <i class="el-icon-document"></i> <span slot="title">导航三</span> </el-menu-item> <el-menu-item index="4"> <i class="el-icon-setting"></i> <span slot="title">导航四</span> </el-menu-item> </el-menu> </div> </template> <script> export default { data () { return { msg: 'Welcome to Your Vue.js App' } }, methods: { jump (url) { //向当前路由后面追加一段url this.$router.push(url) }, } }测试效果图
