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路線時，對應於組件的模板將不會呈現。 我檢查了應用程序$route對象，他們正確檢測路由和組件。 只是模板不會呈現。 如果有幫助，我的App.vue也有<router-view> 。

是否有可能有多個嵌套路線？ 或者我錯過了什么？

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,
},