Vue Js Routing - Eltern ohne Pfad

Question

Momentan arbeite ich an einem Projekt, wo ich zwei Komponenten mit einem router-view, Auth und Dashboard habe. Diese beiden Komponenten haben unterschiedliche HTML-Strukturen, verwenden aber im Routing path: '' den gleichen Basispfad.

Die Routing-Datei würde wie folgt aussehen:

{ 
    path: '/', 
    component: Dashboard, 
    children: [ 
    ... 
    ], 
    path: '/', 
    component: Auth, 
    children: [ 
    ... 
    ] 
} 

Ofcourse dies Komplikationen zu schaffen, da die Wege gleich sind. Gibt es eine Möglichkeit, eine Elternkomponente ohne einen Pfad zu haben?

Answer 1

Sie können eine neue Komponente erstellen, die die Dashboard oder Auth Komponenten bedingt zeigt, dann, dass als Komponente für die in den Routen Config '/' Pfad festgelegt.

Etwas wie folgt aus:

<template> 
    <auth v-if="isAuthenticating" /> 
    <dashboard v-else /> 
</template>