vue-router標籤的默認子路由

我想要一個包含2個列表的標籤頁，默認情況下打開1個標籤頁。vue-router標籤的默認子路由

我有以下航線配置，我已經改變了名稱，以便簡化

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

裏面./views/Home.vue我有一個<router-view></router-view>低於2 <router-link> S代表每個選項卡（子路徑）。

當我訪問應用程序路線http://domain/我想激活list1選項卡。我目前唯一可以做到這一點的方式是如果我訪問http://domain/list1。

我已經試過

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

，這起初效果很好，但是如果我訪問http://domain/list2我的兩個選項卡鏈接（路由器鏈路）具有有效狀態。

JSFiddle，我不能去運行，但幫助上下文

是否有更好的解決方案呢？

來源

2017-02-23 Titan

https://router.vuejs.org/en/essentials/nested-routes.html請參閱頁面底部的示例。 – Eggy

@Eggy但是當你定義第二個孩子路線時，當它激活時，子節點''將會激活 – Titan

沒有例子很難說清楚。但你可以嘗試'精確'支持路由器鏈接https://router.vuejs.org/en/api/router-link.html – Eggy

我想你想要做什麼工作，如果你家的路線是不是「/」

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

這將加載主頁組件和列表1組件您最初的內部。然後你就可以將用戶的路由器鏈接，資產淨值對列表2：

或者，也許我不明白的問題。

來源

2017-02-23 23:23:00 retrograde

我不能讓小提琴運行，但這裏是上下文：http://jsfiddle.net/wtpuevc6/33/ – Titan

爲了使一個組件（片）在訪問父路徑出現默認情況下，你需要添加一個路徑爲「」（空字符串）

以下是來自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 
     ] 
    } 
    ] 
})

不要使用'/'，它會被視爲根路由。

來源

2017-09-17 06:44:05

vue-router標籤的默認子路由

回答

相關問題