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

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

!-- 左侧导航 -->
      

        

          

            
              火情共享
              平台监控
              
              历史火情
              
              统计
            
          
        
      

右边是内容展示部分，要实现的效果如上，点击左侧导航栏后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页面中，

这是afair组件里的右侧内容区，可以渲染指定路由对应的组件，可看成为容器，所渲染的组件是由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，这个在afaire组件里，当我点击mapshow，index会访问/mapshow路由，此时里面就会显示afaire的子路由/mapshow组件里面的内容，当点击PcMonitor时，访问/PcMonitor,此时显示/PcMonitor组件里面的内容。