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