嵌套的 Vue 子路由不会自动加载

Posted 2023-02-22

【中文标题】嵌套的 Vue 子路由不会自动加载

【英文标题】：Nested Vue Subroutes don't load automatically

【发布时间】：2021-11-15 04:22:14

【问题描述】：

我有一个带有侧边栏的应用程序。 默认情况下，在加载patient/:id 时，我想加载Patient 视图，默认情况下该视图还应加载其子视图PatientDashboard。

在患者视图组件中，我有一个路由器视图，默认情况下应该加载PatientDashboard-组件。

但是，每次我将页面加载到路由patient/:id 时，我都需要在PatientDashboard 和Timeline 的侧边栏按钮之间来回切换以加载我的PatientDashboard-组件。

那么我如何在第一次加载时获取默认子路由来加载组件？

患者组件：

<template>
  <div">
    <ProfileSidebar :sidebar_elements="sidebar_elements"/>
    <div id="profile_content">
      <router-view :key="$route.fullPath" />
    </div>
  </div>
</template>

路由器：

const routes = [

    path: "/patient/:patient",
    name: "Patient",
    component: Patient,
    props: true,
      children: [
        
          path: "timeline",
          name: "Timeline",
          component: Timeline
        ,
        
          path: "",
          name: "PatientDashboard",
          component: PatientDashboard
        ,
      ],

  ,
]

【参考方案1】：

在主路由中添加redirect 解决了它：

redirect: 
  name: "PatientDashboard"
,