Vue.jsで子コンポーネントに移動

Question

私はVue.jsでビルドされたアプリを持っていますこのアプリでは、Vue Routerを使用しています。私は首尾よくトップレベルのルートが働いています。しかし、私は子ルートを稼働させることができません。私のコードは、ルートのchildrenプロパティ内で定義されたルートを無視しているようです。このfiddleの問題をセットアップしました。関連するコードは次のようになります。

const CustomerMenu = { template: '<div><br />please choose: <router-link to="/customers/list">list</router-link>&nbsp;&nbsp;<router-link to="/customers/stats">stats</router-link></div>' } 
const CustomerList = { template: '<div>A list of customers here</div>' }; 
const CustomerStats = { template: '<div>Customer statistics</div>' }; 
const Suppliers = { template: '<div>Suppliers</div>' } 

const router = new VueRouter({ 
    mode: 'history', 
    routes: [ 
    { path: '/customers', component: CustomerMenu, children: [ 
     { path: 'list', component: CustomerList }, 
     { path: 'stats', component: CustomerStats } 
    ]}, 
    { path: '/suppliers', component: Suppliers } 
    ] 
}) 

new Vue({ 
    router, 
    el: '#app', 
    data: {} 
}); 

どのように私はルートのchildrenプロパティで定義されたルートに関連付けられたコンテンツを表示します。言い換えれば、ユーザーがそれぞれのリンクを選択したときに、「リスト」または「統計」コンポーネントを表示するにはどうすればよいですか？

ありがとうございました！

Answer 1

CustomerMenuコンポーネント内に<router-view/>がありませんでした。 http://jsfiddle.net/sn5vu6ek/

childrenのルートを持つすべてのコンポーネントは、子コンポーネントを表示できる必要があります。

コンポーネント間でパスの一部を共有したい場合は、<router-view/>の親を作成するか、複数のコンポーネントのフルパスを指定します。