el-menu及嵌套路由实现点击导航栏显示不同内容而导航栏不动功能

<template>
  <div id="test">
    <div id="container-fluid">
      <!--顶部-->
      <div class="row head">
        <div class="header">
          <div class="logo"><img style="margin-left: 25px;max-height: inherit;" alt="中科锐景科技有限公司"
                                 src="../../static/images/logo_main.png"></div>
          <div class="user" id="user">当前用户：
            柴
            <a href="/stalkdev/logout.asp">退出</a>
          </div>
        </div>
      </div>

      <!-- 左侧导航 -->
      <div class="lfmenu">
        <div class="menu_content">
          <div class="list-group">
            <el-menu default-active="/MapShow" class="list-group-item" router>
              <el-menu-item index="/MapShow" class="list-group-item" :class="{'isActive': !active}">火情共享</el-menu-item>
              <el-menu-item index="/PcMonitor" class="list-group-item" :class="{'isActive': !active}">平台监控
              </el-menu-item>
              <el-menu-item index="/HistoryFire" class="list-group-item" :class="{'isActive': !active}">历史火情
              </el-menu-item>
              <el-menu-item index="/TongJi" class="list-group-item" :class="{'isActive': !active}">统计</el-menu-item>
            </el-menu>
          </div>
        </div>
      </div>
      <!-- 右侧主内容区 -->
      <div id="main-container">
        <!--<div class="mainbox" style="padding: 10px;padding-right: 15px;">-->
          <!--<div class="panel-body">-->
            <!--<div style="background: #ffffff;margin-top: 10px;"></div>-->
          <!--</div>-->
        <!--</div>-->
        <router-view class="view"></router-view>

      </div>

    </div>
  </div>
</template>
<script>
  import Vue from 'vue'
  import Element from 'element-ui'
  import 'element-ui/lib/theme-default/index.css'

  Vue.use(Element)

  window.usermap_center = [111, 30.03]
  window.usermap_zoom = 0
  window.usermap_extend = [0, 0, 180, 90]


  export default {
    name: 'afire',
    data: function () {
      return {active: true}
    },
    computed: {
      MapShow() {

      }
    }


  } </script>
<style>
  /*顶部样式*/
  .header {
    width: 100%;
    height: 69px;
    background: #FFDC6E;
    background-size: cover;
    vertical-align: middle;
    display: list-item;
    line-height: 69px;
    max-height: 69px;
    position: relative;
  }

  .logo {
    width: 230px;
    height: 69px;
    background: #FFDC6E;
    float: left;
    padding-top: 5px;
  }

  .user {
    float: right;
    width: auto;
    height: 30px;
    margin-top: 25px;
    margin-right: 30px;
    line-height: 1em;
  }

  .user
  a {
    color: #000;
  }

  .menu_content {
    width: 230px;
    /*height: -webkit-fill-available;*/
    height: 100%;
    background: #323232;
  }

  .menu_content .list-group .list-group-item_text {
    width: 230px;
    display: block;
    padding: 15px;
    background: #262626;
  }

  .menu_content .list-group .list-group-item {
    text-align: center;
    padding: 0px;
    border: 0px;
    border-bottom: 1px solid #3a3a3a;
    margin: 0px;
  }

  .lfmenu {
    position: absolute;
    height: 100%;
    left: 0px;
    top: 69px;
    background: #323232;
  }

  .row {
    margin-top: -8px;
    margin-right: -15px;
    margin-left: -15px;
  }

  .menu_content .list-group .list-group-item_text {
    width: 230px;
    display: block;
    padding: 15px;
    background: #262626;
  }

  .el-menu {
    background-color: #262626;
  }

  .el-menu--horizontal.el-menu--dark .el-submenu .el-menu-item:hover, .el-menu--horizontal.el-menu--dark .el-submenu .el-submenu-title:hover, .el-menu-item:hover {
    background-color: #262626;
  }

  .el-menu--horizontal.el-menu--dark .el-submenu .el-menu-item.is-active, .el-menu-item.is-active {
    color: #FFDC6E;
  }

  .el-menu-item, .el-submenu__title {
    color: #fff;
  }

  .mainbox {
    width: auto;
    margin-left: 230px;
    height: 100%;
  }


</style>

这是我项目的主页面，主页面分为三个部分，上部的banner条，下面左边的导航栏，导航栏用el-menu编写，index后边的参数是组件路径

!-- 左侧导航 -->
      <div class="lfmenu">
        <div class="menu_content">
          <div class="list-group">
            <el-menu default-active="/MapShow" class="list-group-item" router>
              <el-menu-item index="/MapShow" class="list-group-item" :class="{'isActive': !active}">火情共享</el-menu-item>
              <el-menu-item index="/PcMonitor" class="list-group-item" :class="{'isActive': !active}">平台监控
              </el-menu-item>
              <el-menu-item index="/HistoryFire" class="list-group-item" :class="{'isActive': !active}">历史火情
              </el-menu-item>
              <el-menu-item index="/TongJi" class="list-group-item" :class="{'isActive': !active}">统计</el-menu-item>
            </el-menu>
          </div>
        </div>
      </div>

右边是内容展示部分，要实现的效果如上，点击左侧导航栏后banner条和导航栏均不动，只有右侧的内容部分改变，解决这个问题的方法是利用嵌套路由，我直接在cli生成的router文件下的index.js编写，整个路由文件如下

import Vue from 'vue'
import Router from 'vue-router'
import afire from '@/components/afire'
import MapShow from '@/components/MapShow'
import PcMonitor from '@/components/PcMonitor'
import HistoryFire from '@/components/HistoryFire'
import TongJi from '@/components/TongJi'

Vue.use(Router)
export default new Router({
  routes: [
    {
      path: '/',
      name: 'afire',
      component: afire,
      children:[
        {
          path: '/MapShow',
          name: 'MapShow',
          component: MapShow
        },
        {
          path: '/PcMonitor',
          name: 'PcMonitor',
          component: PcMonitor
        },
        {
          path: '/HistoryFire',
          name: 'HistoryFire',
          component: HistoryFire
        },
        {
          path: '/TongJi',
          name: 'TongJi',
          component: TongJi
        }
      ]
    },
  ]
})

afaire是主页，其他组件是afaire的子组件，也就是其他页面包含在afaire页面中，

<!-- 右侧主内容区 -->
      <div id="main-container">
        <!--<div class="mainbox" style="padding: 10px;padding-right: 15px;">-->
          <!--<div class="panel-body">-->
            <!--<div style="background: #ffffff;margin-top: 10px;"></div>-->
          <!--</div>-->
        <!--</div>-->
        <router-view class="view"></router-view>

      </div>

这是afair组件里的右侧内容区，<router-view>可以渲染指定路由对应的组件，可看成为容器，所渲染的组件是由router指定，我们的路由

 routes: [
    {
      path: '/',
      name: 'afire',
      component: afire,
      children:[
        {
          path: '/MapShow',
          name: 'MapShow',
          component: MapShow
        },
        {
          path: '/PcMonitor',
          name: 'PcMonitor',
          component: PcMonitor
        },
        {
          path: '/HistoryFire',
          name: 'HistoryFire',
          component: HistoryFire
        },
        {
          path: '/TongJi',
          name: 'TongJi',
          component: TongJi
        }
      ]

我自己的理解就是afire下有子路由/mapshow、/PcMonitor，这个<router-view>在afaire组件里，当我点击mapshow，index会访问/mapshow路由，此时<router-view>里面就会显示afaire的子路由/mapshow组件里面的内容，当点击PcMonitor时，访问/PcMonitor,此时显示/PcMonitor组件里面的内容。