VUE路由器将不渲染嵌套路线

Question

模板所以我有这样的路线：

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

，并在首页组件我有这样的事情：

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