Vue Router2 nicht tief verschachtelt Routen

Question

Meine Strecken fangen hat die folgende Struktur in mehrere Dateien aufgeteilt:

export const router = new VueRouter({ 
    mode: 'hash', 
    base: __dirname, 
    saveScrollPosition: true, 
    history: true, 
    routes : Array.concat(userRoutes, siteRoutes) 
}) 

... 
// user/routes.js 

export const userRoutes = [ 
    { 
     path: '/user', 
     name: 'user_main', 
     component: UserMain, 
     meta: {authRequired: true}, 
     children: Array.concat([ 
      ... 
      ], accountRoutes) 
    } 
] 


// account/routes.js 

export const accountRoutes = [ 
    { 
     path: 'account', 
     name: 'user_account', 
     component: AccountMain, 
     children: [ 
      {path: 'edit', name: 'user_edit_account', component: EditAccount}, 
      {path: 'addresses', name: 'user_addresses', component: Addresses}, 
     ] 
    } 
] 

und ich versuche

/user/account/addresses 

aber für etwas unter Konto zu fangen/i erhalten die AccountMain-Komponente, nicht die Komponente, die ich erwartet habe. Wenn ich die Adressenkomponente außerhalb der Kontorouten nehme und sie verschiebe, um Benutzer/Adressen zu sagen, funktioniert es. aber ich kann nicht unter AccountMain erreichen. Es ist das gleiche für jede andere Komponente unter AccountMain

Wenn ich versuche, etwas zu erreichen, die nicht unter Konto/zum Beispiel existieren:

/user/account/blah 

es gibt leere Seite für diese Ansicht.

Aber das Hinzufügen

beforeEnter: (to, from, next) => { 
    to.matched.forEach(m => console.log(m.name)) 
} 

zu AccountMain Route Definition gibt einen zusätzlichen und den erwarteten Namen

user_main 
user_account 
user_addresses 

So ist es den Namen findet, sondern gibt den Eltern (AccountMain) statt es untergeordnete Komponente ist Adressen. Dies hängt nicht mit der AccountMain-Komponente zusammen, denn wenn ich die AccountMain-Komponente aus der Routendefinition wie dem folgenden entferne, kann ich die Adressen immer noch nicht erreichen und bekomme eine leere Seite.

export const accountRoutes = [ 
    { 
     path: 'account', 
     name: 'user_account', 
     children: [ 
      {path: 'edit', name: 'user_edit_account', component: EditAccount}, 
      {path: 'addresses', name: 'user_addresses', component: Addresses}, 

     ] 
    } 
] 

Ich benutze vue Router 2.1.1.

Was mache ich hier falsch?

Answer 1

Die Router-Ansicht hier ist eine Top-Level-Steckdose. Die Komponente wird durch eine Route der höchsten Ebene wiedergegeben. In ähnlicher Weise kann eine gerenderte Komponente auch eine eigene verschachtelte Router-Ansicht enthalten. Mehr, Nested Routes.

Jede Elternkomponente muss eine eigene Routeransicht für ihre untergeordneten Routen haben. jsfiddle

const UserMain = { 
    template: ` 
    <div class="user"> 
     <h1>User</h1> 
     <router-view></router-view> //a rendered component can also contain its own, nested router-view 
    </div> 
    ` 
} 

const AccountMain = { 
    template: ` 
     <div> 
     <h1>AccountMain</h1> 
     <router-view></router-view> //a rendered component can also contain its own, nested router-view 
    </div> 
    ` 
}