Vue.js вложенных маршрутизации с по умолчанию ребенка

Question

У меня есть проблема с chilrend по умолчанию маршрут в Vue.js 2.

в Когда я посещаю LOCALHOST/списки на начальном этапе, это правильно загружает index.vue и map.vue как ребенок.

Когда я перемещаюсь с использованием router-link в localhost/listings/1, а затем используя router-link обратно в 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') 
       } 
      ] 
     }, 

     ... 

    ] 
}); 

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.