vue多个＜router-view＞ 嵌套理解

在学习vue的过程中，多次碰到如有跳转错误的问题。我在多级菜单(存在多个)中路由跳转多次不符合自己的预期。

       经过尝试，终于初步理解多个嵌套时，与路由配置的关系。

假设我们有如下路由配置

const routerMenu = [
  {
    name: 'home',
    path: '/home',
    component: () => import('@/components/layout/Layout.vue'),
    children: [
       {
        name: 'home1',
        path: 'home1',
        component: () => import('@/components/layout/Layout.vue'),
        children: [
            {
                name: 'home1-1',
                path: 'home1-1',
                component: () => import('@/components/layout/Layout.vue'),
                children: 
            },
            {
                name: 'home1-2',
                path: 'home1-2',
                component: () => import('@/components/login/index.vue'),
            }
        ]
       },
      {
        name: 'home2',
        path: 'home2',
        component: () => import('@/components/login/index.vue'),
        children: [
            {
                name: 'home2-1',
                path: 'home2-1',
                component: () => import('@/components/layout/Layout.vue'),
                children: 
            },
            {
                name: 'home2-2',
                path: 'home2-2',
                component: () => import('@/components/login/index.vue'),
            }
        ]
      }
    ]
  },
  {
    name: 'login',
    path: '/login',
    component: () => import('@/components/login/index.vue'),
  },
  {
    path: '',
    redirect:'/home'
  }];

在假设我们有如下配置：

第一个vue文件中包含一个: 

文件名为：home1.vue ； 路由路径为：/home/home1

当我们进入home1.vue文件中时，那么这里面的就只包含 /home/hom1/home1-1 和  /home/hom1/home1-2  因为 路由 /home/home1的children只有这两个地址。且能保证在指定的div（）中展示对应的vue页面。

第二个vue文件中包含一个:  

文件名为：home2； 路由路径为：/home/home2

同理当我们进入home2.vue文件中时，那么这里面的就只包含 /home/hom2/home2-1 和  /home/hom2/home2-2  因为 路由 /home/home1的children只有这两个地址。