vue-Router wird nicht Vorlage auf verschachtelte Route machen

Question

So habe ich eine Route wie folgt aus:

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

und in der Hauptkomponente ich so etwas wie dieses:

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

Aber als ich Navigieren Sie zu den Routen /health/overview und /health/blood, die den Komponenten entsprechenden Vorlagen werden nicht gerendert. Ich habe die Apps $route Objekte überprüft, sie erkennen die Routen und die Komponenten korrekt. Nur die Vorlage wird nicht gerendert. Ich habe auch eine <router-view> in meinem App.vue, wenn das hilft.

Ist es nicht möglich, mehrfach verschachtelte Routen zu haben? Oder fehlt mir etwas?

Answer 1

Die Gesundheit Route so sein sollte:

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

Wenn Sie die Health Komponente nicht brauchen überhaupt aus irgendeinem Grunde (dh Sie keine gemeinsame Funktionalität oder eine Vorlage für jedes Kind haben), Sie können nur die Gesundheit Route vollständig entfernen und ersetzen Sie sie stattdessen mit diesem:

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