2016-11-22 8 views
1

내가 처음에 로컬 호스트/목록을 방문 할 때 내가Vue.js은 기본 아이 라우팅 중첩되어

Vue.js 2에 기본 chilrend 경로에 문제가 있고, 그것을 올바르게로 index.vue 및 map.vue로드 어린이.

router-link를 사용하여 localhost/listings/1로 이동 한 다음 router-link to localhost/listings를 사용하면 여전히 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') 
       } 
      ] 
     }, 

     ... 

    ] 
}); 

답변

6

:

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 경로로 더 이상 전파되지 않을 가능성이 높기 때문입니다.