Domyślna trasa podrzędna routera vue dla kart

Question

Próbuję mieć stronę główną z zakładkami zawierającymi 2 listy, z 1 otwartą domyślnie.

Mam następujące config trasy, zmieniłem nazwy uprościć

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') 
    }] 
} 

Inside ./views/Home.vue Mam <router-view></router-view> poniżej 2 <router-link> s dla każdej karcie (trasy dziecięcej).

Gdy odwiedzam trasę aplikacji http://domain/, chcę aktywować zakładkę list1. Jedyny sposób, w jaki mogę to teraz zrobić, to wizyta http://domain/list1.

Próbowałem

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

i to początkowo działa dobrze, jednak jeśli mogę odwiedzić http://domain/list2 obie moje linki zakładką (Router-linki) mają stan aktywny.

JSFiddle których nie mogę dostać się do uruchomienia, ale pomaga w kontekście

Czy istnieje lepsze rozwiązanie tego?

Answer 1

myślę, co chcesz zrobić, prace jeśli w domu nie jest droga „/”

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

To załaduje składnik domowego i komponentu lista1 wewnątrz początkowej. Następnie można użytkownik Link router do NAV listy2:

A może ja nie rozumiem pytania.

Answer 2

Do wytwarzania składnika (TAB) pojawiają się domyślnie na odwiedzenie trasę nadrzędną, należy dodać ścieżkę jako „” (pusty ciąg)

Poniżej jest przykład z docs Vue Router

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 
     ] 
    } 
    ] 
}) 

Nie używaj znaku "/", będzie to traktowane jako trasa główna.