Vue Router 4.x如何配置子路由完全替换父组件内容？

Vue Router 的嵌套路由规则本身要求子组件必须渲染在父组件的 <router-view> 内，你要的「路径有层级、组件完全替换」需求，本质是组件不需要嵌套，不需要强行使用嵌套路由配置，也不需要在组件内写冗余的显示隐藏判断，以下是两种最优实现方案：

方案1：平级路由配置（最推荐） #

路径层级和组件嵌套是两个独立概念，不需要为了路径前缀强行配置父子路由，直接写平级路由共享路径前缀即可，所有组件都会渲染在根层级的 <router-view> 上，自然实现互相完全替换：

const routes = [
  // 匹配 /user/johnny 渲染 User 组件
  {
    path: '/user/:id',
    component: () => import('@/views/User.vue')
  },
  // 匹配 /user/johnny/profile 直接渲染 Profile 组件
  {
    path: '/user/:id/profile',
    component: () => import('@/views/Profile.vue')
  },
  // 匹配 /user/johnny/posts 直接渲染 Posts 组件
  {
    path: '/user/:id/posts',
    component: () => import('@/views/Posts.vue')
  }
]

该方案不需要修改任何组件代码，也没有额外逻辑开销，完全符合需求。

方案2：保留嵌套路由结构，父路由用空占位组件 #

如果需要保留路由的嵌套结构（比如要统一做路由守卫、继承父路由元信息等），可以把父路由的组件替换为仅包含 <router-view> 的空占位组件，原 User 组件拆为父路由的默认子路由：

const routes = [
  {
    path: '/user/:id',
    // 父路由仅做占位，只有router-view无其他业务内容
    component: { template: '<router-view/>' },
    children: [
      // 空路径默认子路由，匹配 /user/:id 时渲染 User 组件
      {
        path: '',
        component: () => import('@/views/User.vue')
      },
      // 匹配子路由时直接占父路由的router-view位置，完全替换默认子路由的User组件
      {
        path: 'profile',
        component: () => import('@/views/Profile.vue')
      },
      {
        path: 'posts',
        component: () => import('@/views/Posts.vue')
      }
    ]
  }
]

该方案也不需要在原 User 组件内加任何判断逻辑，同时保留了路由的嵌套结构。

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