Vue Router嵌套路由访问子路由时父组件同时显示问题求助

核心原因说明 #

• Vue Router 嵌套路由的原生设计逻辑就是父子路由对应组件共同渲染：子路由的组件会被插入到父组件预留的 <router-view> 位置，因此访问子路由路径时，父组件和子组件会同时存在。
• 你第一版配置属于标准嵌套路由结构，/admin/stock 路径会同时匹配父路由 /admin 和子路由 stock，因此两个组件都会被渲染，出现上下堆叠的效果。
• 嵌套路由的适用场景是存在公共布局的情况，比如父组件承载侧边栏、顶部导航等公共模块，子路由只渲染内容区域，可以减少公共逻辑的重复编写。

平级路由配置生效原因 #

你第二版配置中 /admin/stock 是和 /admin 平级的一级路由，二者没有从属关系，访问对应路径时只会命中唯一的路由规则，因此两个组件会独立渲染，不会同时出现。

替代方案（保留路径层级的同时实现组件独立渲染） #

如果需要保留 /admin 前缀的路径结构，又不想访问子路由时父组件显示，可以将父路由调整为无组件的纯路径容器：

{
    path: '/admin',
    children:[
      { path: '', name: 'Admin', component: () => import('pages/Admin')},
      { path: 'stock', name: 'Stock', component: ()=> import('pages/Stock')},
    ]
}

该配置下 /admin 会匹配空的子路由渲染 Admin 组件，/admin/stock 只会渲染 Stock 组件，两个组件独立展示。

内容的提问来源于stack exchange，提问作者Niv