Vue嵌套子路由无法自动加载：访问patient/:id时默认子组件不渲染

你遇到的问题是Vue Router父路由加载时未自动触发默认子路由匹配，可通过以下方式修复：

1. 给父路由显式添加redirect配置 #

这是最稳妥的兼容方案，直接指定父路由匹配时自动重定向到默认子路由，修改后的路由配置如下：

const routes = [
{
    path: "/patient/:patient",
    name: "Patient",
    component: Patient,
    props: true,
    // 新增重定向配置，指向默认子路由
    redirect: { name: 'PatientDashboard' },
    children: [
        {
          path: "timeline",
          name: "Timeline",
          component: Timeline
        },
        {
          path: "",
          name: "PatientDashboard",
          component: PatientDashboard
        },
      ],
  },
]

该配置会在匹配到/patient/:id路径时自动跳转到默认子路由，强制触发PatientDashboard组件加载

2. 调整路由跳转逻辑 #

如果你是通过父路由name进行跳转，比如：

// 旧的跳转方式
$router.push({ name: 'Patient', params: { patient: xxx } })

可以直接调整为跳默认子路由的name，效果和加redirect一致：

// 新的跳转方式
$router.push({ name: 'PatientDashboard', params: { patient: xxx } })

3. 可选：检查Vue Router版本 #

部分低版本Vue Router存在默认空路径子路由匹配异常的问题，如果上面两个方案无效，可以尝试升级Vue Router到对应大版本的最新稳定版：

• Vue2对应vue-router@3.6.5+
• Vue3对应vue-router@4.2.0+

内容的提问来源于stack exchange，提问作者Martin Müsli