vue-router不会在嵌套路由上呈现模板

Question

So I have a route like this:

const routes = [{
    path: '/',
    component: Home,
    children: [
        {
            path: "/health"
            children: [
                {
                    path: 'overview'
                    component: Overview
                },
                {
                    path: 'blood',
                    component: Blood
                }
            ]
        }
    ]
}]

and in the Home component I have something like this:

<template>
    <div id="home">
         <router-view></router-view>
    </div>
</template>

But when I navigate to the /health/overview and /health/blood routes, the templates corresponding to the components won't render. I checked the apps $route objects, they correctly detect the routes and the components. Just the template won't render. I also have a <router-view> in my App.vue if that helps.

Is it not possible to have multi nested routes? Or am I missing something?

Answer 1

The health route should be like this:

{
  path: 'health',     // not '/health'
  component: Health,  // this can just be a dummy component with a <router-view/>
  children: [...],
},

If you don't need the Health component at all for any reason (ie you don't have any shared functionality or template across each child), you can just remove the health route completely and replace it with this instead:

{
  path: 'health/overview',
  component: Overview,
},
{
  path: 'health/blood',
  component: Blood,
},