vue-router的嵌套使用（children），实现页中页效果

我们所看到的页面实际都是直接或间接由APP.vue根组件映射出来的 嵌套的组件需要嵌套的路由来映射，配置好父路由后，需要在哪个路由页面里面映射，就在哪个父路由添加children属性。

步骤一：配置完父路由后添加子路由

vue-----路由（router）的全局配置。 需要注意的细节：children里面的path不需要加“/”，以斜杠开头会被当做根路径 children 配置就是像 routes 配置一样的路由配置数组，可以嵌套多层路由。

{
            // 父路由
            name: 'index1',
            path: '/index1',
            // 异步引入组件
            component: () => import('@/views/index1.vue'),
            // 子路由
            children: [
                {
                    name: 'postList',
                    path: 'postList',//无需添加斜杠
                    component: () => import('@/views/postList.vue')
                },
            ]
        }

步骤二：将子路由放置父路由需要映射的位置

<router-view></router-view>

<template>
  <div class="index1">
    <div class="left"></div>
    <div class="right">
      <!-- 需要将子路由映射的位置，出口 -->
      <router-view></router-view>
      <router-link :to="{ name: 'postList' }">点我映射子路由</router-link>
    </div>
  </div>
</template>

<script>
export default {};
</script>

.<style lang="less" scoped>
.index1 {
  width: 100%;
  height: 100%;
  display: flex;
  .left {
    width: 30%;
    height: 100%;
    background-color: aqua;
  }
  .right {
    flex: 1;
    background-color: coral;
  }
}
</style>
</style>

步骤三：示例需要引入的页面

<template>
  <div class="postList">我是子路由映射过来的哦</div>
</template>

<script>
export default {};
</script>

.<style lang="less" scoped>
.postList {
  margin: 50px;
  background-color: darkgreen;
  width: 500px;
  height: 500px;
}
</style>

效果