用Vue整合Echarts做数据展示：整合ElementUI+router实现侧边导航栏

新增aside.vue组件

还是从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>

将aside组件放入主页内

/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>

1. 注册路由

   /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)
       },
     }
   }
   

   测试效果图