Vuejs Routing funktioniert nur teilweise.

Question

Meine App funktioniert gut, wenn ich Strecken ohne Kinder (Verschachtelung) setzen, aber ich habe gerade versucht es jetzt zu nisten und konvertiert meine Routen zu diesem: in routes.js

import alphabetsPage from './components/views/pages/alphabets.vue' 
import dictionaryPage from './components/views/pages/dictionary.vue' 
import numbersPage from './components/views/pages/numbers.vue' 

import LayoutView from './components/views/Layout.vue' 

const routes = [{ 

    path: '/', 
    name: 'Home', 
    component: LayoutView, 
    children: [{ 
     path: 'basic', 
     name: 'Basic', 
     component: alphabetsPage, 
      children: [{ 
      path: 'alphabets', 
      name: 'Aphabets', 
      component: alphabetsPage   
      }, 
      { 
      path: 'numbers', 
      name: 'Numbers', 
      component: numbersPage   
      }] 
    }] 
}] 

export default routes 

Wenn ich / oder klicken Sie auf dem Weg gehen <router-link to="/basic/alphabets" tag="li"><a>numbers</a></router-link> Ich kann die alphabetsPage Komponente sehen, aber wenn ich gehe, klicken Sie auf <router-link to="/basic/numbers" tag="li"><a>numbers</a></router-link> die Route funktioniert nicht. Ich habe ein numbersPage componet arbeiten.

Das muss von den Routen sein, weil, wenn ich keine Kinder benutze und nur den Pfad in Routen wie /basic/numbers oder /basic/alphabets definieren, funktioniert es.

Answer 1

Kinder sollten irgendwo angezeigt werden.

Ihre alphabetsPage haben nicht in Vorlage

const alphabetsPage = { 
    template: '<div>/basic/alphabets <router-view></router-view></div>' 
} 

https://jsfiddle.net/6fvL1xwc/