>我们所看到的页面实际都是直接或间接由`APP.vue`根组件映射出来的 >嵌套的组件需要嵌套的路由来映射，配置好父路由后，需要在哪个路由页面里面映射，就在哪个父路由添加`children`属性。 > ![在这里插入图片描述](//p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5041e2be2a494c3abc9901e4f4b400d4~tplv-k3u1fbpfcp-zoom-1.image) ## 步骤一：配置完父路由后添加子路由 >[vue-----路由（router）的全局配置](https://blog.csdn.net/weixin_47886687/article/details/109405003)。 >需要注意的细节：`children`里面的`path`不需要加“`/`”，以斜杠开头会被当做根路径 >`children` 配置就是像 `routes` 配置一样的路由配置数组，可以嵌套多层路由。 ```javascript { // 父路由 name: 'index1', path: '/index1', // 异步引入组件 component: () => import('@/views/index1.vue'), // 子路由 children: [ { name: 'postList', path: 'postList',//无需添加斜杠 component: () => import('@/views/postList.vue') }, ] } ``` ## 步骤二：将子路由放置父路由需要映射的位置 > `` ```javascript . ``` ## 步骤三：示例需要引入的页面 ```javascript . ``` ## 效果 ![在这里插入图片描述](//p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/22c269977fec44fc830ee47bdb385eaa~tplv-k3u1fbpfcp-zoom-1.image)