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

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

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

假设我们有如下路由配置

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文件中包含一个<router-view>: 

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

<template>
  <div>
    <div>
      <family-menu></family-menu>
    </div>
    <div>
      <router-view class="home1"></router-view>
    </div>
  </div>
</template>

<script>
export default {
name: "home1",

}
</script>

<style lang="less" scoped>
</style>

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

第二个vue文件中包含一个<router-view>:  

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

<template>
  <div>
    <div>
      <family-menu></family-menu>
    </div>
    <div>
      <router-view class="home2"></router-view>
    </div>
  </div>
</template>

<script>
export default {
name: "home2",

}
</script>

<style lang="less" scoped>
</style>

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