Vue.js嵌套默認路由的孩子

Question

我有在Vue.js 2

默認chilrend路線的問題。當我最初訪問本地主機/列表，它可以正確地裝入index.vue和map.vue作爲兒童。

當我使用router-link導航到localhost/listings/1，然後使用router-link回到localhost /列表時，它仍然加載show.vue模板。 這不應該發生？

我沒有導航警衛或任何應該干擾。無論如何要糾正這一點？

我的路線：

window.router = new VueRouter({ 
    routes: [ 

     ... 

     { 
      path: '/listings', 
      name: 'listing.index', 
      component: require('./components/listing/index.vue'), 
      children: [ 
       { 
        path: '', 
        component: require('./components/listing/map.vue') 
       }, 
       { 
        path: ':id', 
        name: 'listing.show', 
        component: require('./components/listing/show.vue') 
       } 
      ] 
     }, 

     ... 

    ] 
}); 

Answer 1

也許嘗試重新安排孩子們，路線的順序解僱他們從頂部到底部的匹配，所以這樣應該可以解決這個問題：

window.router = new VueRouter({ 
    routes: [ 

    ... 

    { 
     path: '/listings', 
     name: 'listing.index', 
     component: require('./components/listing/index.vue'), 
     children: [ 
      { 
       path: ':id', 
       name: 'listing.show', 
       component: require('./components/listing/show.vue') 
      } 
      { 
       path: '', 
       component: require('./components/listing/map.vue') 
      }, 
     ] 
    }, 

    ... 

    ] 
}); 

只是稍微澄清一點，你的path: ''本質上是一個「全部捕獲」，這可能是爲什麼當它在頂部它立即被發現，所以路由器永遠不會傳播任何進一步到:id路線。