My route configuration looks like this:
const routes = [{
path: '/',
component: Home,
children: [
{
path: "/health",
children: [
{
path: 'overview',
component: Overview
},
{
path: 'blood',
component: Blood
}
]
}
]
}]
In the Home component, I have the following structure:
<template>
<div id="home">
<router-view></router-view>
</div>
</template>
However, when navigating to the /health/overview and /health/blood routes, the templates for the components do not render. I have verified that the routes and components are correctly detected in the app's $route objects, but the templates remain blank. Additionally, there is a <router-view> in my App.vue.
Are multi-nested routes not supported, or am I overlooking something?