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

   測試效果圖