其实就是一个平级的路由模式,也就是这样的一个路由结构: routes: [ { path: '/', component: () => import('@/views/index.vue'), // B站首页 children: [ { path: 'video/:videoId/', component: () => import('@/views/Video.vue'), // 视频播放页 }, { path: 'up/:upId', component: () => import('@/views/Up.vue'), // up主的个人主页 } ] }, ] 至于你说的 `显示新页面时并没有覆盖前面已显示的页面,而是从右侧滑动显示盖在当前页面上` 这块其实就是Vue提供的 `Transition` 功能,包裹在 `` 组件外部即可。👉 [Transition | Vue.js](https://link.segmentfault.com/?enc=DaNHwG5L8S%2FTlfJeyaf2uA%3D%3D.BL3CgUV6O0tuNezpmj3hnO46bxeTkq5G1KWIgd%2BZYVvkcl%2Bwu9bWyIyr4vgeUVQzcjX7c1xZrAz64v819ZfahpEcEAe4RQgXNExfihKKsrA%3D)。 * * * 可以多学习一些其他项目的路由设计,`Transition` 的部分可以在社区里面搜索 “Vue过渡与动画” 这个关键词学习。比如说 👉 [Vue 教程第九篇 —— 动画和过度效果](https://segmentfault.com/a/1190000014463082)