Vuejsルーティングは部分的にしか動作しません。

Question

私は子供（ネスティング）せずにルートを置くが、私はちょうど今、巣にそれを試してみましたが、これに私のルートを変換した場合私のアプリは、うまく動作します：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 

に、私はルート上に/に行くか、クリックした場合<router-link to="/basic/alphabets" tag="li"><a>numbers</a></router-link>私はalphabetsPageコンポーネントを見ることができますが、私が<router-link to="/basic/numbers" tag="li"><a>numbers</a></router-link>をクリックすると、ルートが動作しません。私はnumbersPageコンポーネントを使用しています。

これはルートからのものでなければなりません。子供を使用せず、ルート内のパスを/basic/numbersまたは/basic/alphabetsとして定義するだけで済みます。

Answer 1

子供はどこかに表示する必要があります。

あなたalphabetsPageは

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

https://jsfiddle.net/6fvL1xwc/