Vue.js nested routing with default child
<p>I have an issue with a default children route in Vue.js 2.</p>
<p>When I visit localhost/listings initially, it correctly loads index.vue and map.vue as a child.</p>
<p>When I navigate using router-link to localhost/listings/1, and then using router-link back to localhost/listings, then it still loads the show.vue template. <em>This shouldn't happen?</em></p>
<p>I have no navigation guards or anything that should interfere. Is there anyway to correct this?</p>
<p>My routes:</p>
<pre class="lang-js prettyprint-override"><code>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')
        }
      ]
    },
    
    ...
  ]
});
</code></pre>