Vue3路由之＜router-view＞失效的情形

项目场景：

配置路由的情况如下(配置了A组件和A1组件的路由)：

routes: [
        {
            path: '/',
            component: A
        },
        {
            path:'/a',
            component:A1
        }
    ]

 App.vue的template如下：

<template>
  <router-view></router-view>
</template>

 A组件的template如下：

<template>
    <div>当前是A组件</div>
    <div>
        <router-link to="/a">展示A1组件</router-link>
    </div>
    <div>
        <router-view></router-view>
    </div>
<template/>

---

问题描述

当项目启动时，展示的首页即是A组件。我们想要实现的效果是，当点击了A组件当中的router-link时，A组件中的router-view处会展示A1组件。但实际上，当我们点击了A组件当中的router-link时，A组件会直接被A1组件所替代，也就是说，A1组件并不会在A组件的router-view处被展示，相当于router-view失效了！

---

原因分析：

我们想要实现的效果是在一个组件的内部展示其他组件，此时应当用到多级路由才可以。也就是说，我们要在A组件的内部展示A1组件的话，A1组件的路由必须配置为A组件的子路由，而不应该和A组件的路由是平级的关系！

---

解决方案：

对路由配置进行修改，将A1组件的路由配置为A组件的子路由：

routes: [
        {
            path: '/',
            component: A,
            children: [
                {
                    path: '/a',
                    component: A1
                }
            ]
        },
    ]