vue+element 学习之路（二）路由动态导航栏以及一些疑问

今天在做动态导航栏的时候碰到一个问题，用我自己理解的话来讲大概意思是：
三级路由的组件内容怎么在二级路由的 router-view> </router-view 里？

问题先放着，下面先总结下自己的做法

我的路由表：

routes: [
    {
      path: '/',
      name: 'Login',
      component: Login,
      id:'0',
      meta:{            //mate 相当于一个标签 里面元素例如menuShow 决定了要不要在导航栏显示
        menuShow:false
      }
    },
    {
      path:'/index',
      name:'Index',
      component:resolve =>require(['@/components/Index.vue'],resolve),
      id:'1',
      meta:{
        menuShow:true,
        menuName:'商品管理'
      },
      redirect:{name:'/index/commodityTable'},//跳转到下一级第一个
      children:[
          {
          path:'/index/commodityTable',
          name:'commodityTable',
          id:'1-1',
          meta:{
            menuShow:true,
            menuName:'商品列表'
          },
          component:commodityTable 
        },
        {
          path:'/',
          name:'test',
          id:'1-2',
          meta:{
            menuShow:true,
            menuName:'测试'
          },
          children:[{
            path:'/index/commodityForm',
            name:'commodityForm',
            id:'1-2-1',
            meta:{
              menuShow:true,
              menuName:'商品表单'
            },
            component:commodityForm
          }]
        }
    ]
    },
    {
      path:'/aa',
      name:'aa',
      id:'2',
      meta:{
        menuShow:true,
        menuName:'人员管理',
      }
    }
  ]

对于路由表中 path name id 这些属性就不用说了，很常见，主要说一下meta中的两个变量
，这两个变量都是等下在递归中要处理的元素，menuShow是决定要不要显示此条菜单（也可以理解为是否禁用)

AsideMenu.vue 组件 侧边栏

<template>
    <div>
        <template v-for="navMenu in navMenus">
            <!-- 只有一级菜单 -->
            <el-menu-item 
            v-if="navMenu.children==null && navMenu.meta.menuShow"
            :key="navMenu.id" :data="navMenu" :index="navMenu.path">
                <i class="el-icon-tickets"></i>
                <span slot="title">{{navMenu.meta.menuName}}</span>
            </el-menu-item>

            <!-- 有子菜单 -->
            <el-submenu 
            :key="navMenu.id" :index="navMenu.path" 
            v-if="navMenu.children  && navMenu.meta.menuShow">

                    <template slot="title">
                            <i class="el-icon-tickets"></i>
                            <span>{{navMenu.meta.menuName}} </span>
                    </template>
                    <!-- 递归 子菜单的子菜单-->
                    <AsideMenu :navMenus="navMenu.children"></AsideMenu>
            </el-submenu>

        </template>
    </div>
</template>

<script>
export default {
    name:'AsideMenu',
    props:['navMenus']
}
</script>

Index.vue中引用

		<el-aside>
            <!-- 侧边导航栏 -->
            <el-menu
                :default-active="$route.path"
                background-color="#F0F6F6"
                text-color="#3C3F41"
                active-text-color="#409EFF"
                router
            >
                <aside-menu :navMenus="$router.options.routes"></aside-menu>
            </el-menu>
        </el-aside>
        
<script>
import asideMenu from '@/components/NavMenu/AsideMenu'
export default {
    name:'Index',
    components:{asideMenu}
}
</script>

下面继续回到我的疑问，
路由组件渲染的地方是在注册它的组件中的router-view> </router-view ，就比如
商品列表这个组件是显示在Index的页面中的
Index.vue

那现在如果三级路由的组件也想在一级里渲染呢？

如上图 三级路由没办法在index.vue中的router-view> </router-view渲染 。。
还望请教各路大神给予指点

每隔一段时间会更新一下文章，起到一个总结的作用，若以后某一天发现自己现在写的都是垃圾的话，说明自己真的进步了，嘿嘿嘿~