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

Question

所以我有一条这样的路线：

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

在Home组件中，我有类似以下内容：

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

但是，当我导航到/health/overview和/health/blood路线时，与组件相对应的模板将不会呈现。我检查了app $route对象，它们正确地检测了路线和组件。只是模板不会呈现。我也有一个<router-view>在我App.vue没有什么帮助。

不可能有多条嵌套路线吗？还是我错过了什么？

Answer 1

健康路线应如下所示：

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

如果Health出于任何原因根本不需要该组件（即，每个孩子之间没有共享功能或模板），则可以完全删除运行状况路由，而用以下替代：

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