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

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

     ... 

    ] 
});

来源

2016-11-22 andershagbard

也许尝试重新安排孩子们，路线的顺序解雇他们从顶部到底部的匹配，所以这样应该可以解决这个问题：

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路线。

来源

2016-11-23 05:57:01 K3TH3R

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

回答

相关问题