vue-routerタブのデフォルトの子ルート

Question

私は、2つのリストを含むタブを持つホームページを作成しようとしています。デフォルトでは1つが開いています。

私は次のルートの設定を持って、私は、各タブ（子ルート）のための<router-view></router-view><router-link> 2以下のを持って./views/Home.vue内部

let routes = [{ 
    path: '/', 
    name: 'home', 
    component: require('./views/Home.vue'), 
    children: [{ 
     path: 'list1', 
     name: 'home.list1', 
     component: require('./views/List1.vue') 
    }, { 
     path: 'list2', 
     name: 'home.list2', 
     component: require('./views/List2.vue') 
    }] 
} 

を簡素化するために名称を変更しました。

http://domain/アプリルートにアクセスしたときにlist1タブを有効にします。私が現在行うことができる唯一の方法は、私がhttp://domain/list1を訪問する場合です。

私は

children: [{ 
    path: '', 
    name: 'home.list1' 

を試してみましたが、これは最初に私が http://domain/list2私のタブのリンク（ルータリンク）アクティブ状態を持っているの両方を訪れるがあれば、うまく動作します。私が実行してもらうが、文脈

のために役立ちますすることはできません

JSFiddleは、これに対するより良い解決策はありますか？

Answer 1

私はあなたの家のルートがこれは家庭用コンポーネントとあなたの初期の内部リスト1のコンポーネントをロードします「/」

routes: [ 
    { path: '/home', 
     name: 'home', 
     component: require('./views/home.vue') 
     children: [ 
      { path: '/', name: 'list1', component: list1 }, 
      { path: 'list2', name: 'list2', component: list2}, 
     ], 
    } 
] 

ない場合は作品をやりたいと思います。

か、多分私は質問を理解していない。そして、あなたはリスト2にNAVするユーザールーターのリンクをすることができます。

Answer 2

コンポーネント（タブ）が親ルートを訪れる時にデフォルトを見せることについて、あなたは「」（空文字列）としてパスを追加する必要があります

以下は一例ですVueのルータのドキュメントから

const router = new VueRouter({ 
    routes: [ 
    { 
     path: '/user/:id', component: User, 
     children: [ 
     // UserHome will be rendered inside User's <router-view> 
     // when /user/:id is matched 
     { path: '', component: UserHome }, 

     // ...other sub routes 
     ] 
    } 
    ] 
}) 

'/'は使用しないでください。ルートルートと見なされます。