My application features a sidebar that I want to utilize to load the Patient view by default when accessing patient/:id. This should also trigger the loading of the PatientDashboard sub-view.
Within the Patient view component, there is a router-view that is supposed to automatically load the PatientDashboard component by default.
However, each time I navigate to the patient/:id route, I find myself having to toggle between the sidebar buttons of PatientDashboard and Timeline to display the PatientDashboard component.
So the question is, how can I ensure that the default subroute loads the component upon initial load?
Patient-Component:
<template>
<div>
<ProfileSidebar :sidebar_elements="sidebar_elements"/>
<div id="profile_content">
<router-view :key="$route.fullPath" />
</div>
</div>
</template>
Router:
const routes = [
{
path: "/patient/:patient",
name: "Patient",
component: Patient,
props: true,
children: [
{
path: "timeline",
name: "Timeline",
component: Timeline
},
{
path: "",
name: "PatientDashboard",
component: PatientDashboard
},
],
},
]