带默认子级的 Vue.js 嵌套路由

我对 Vue.js 2 中的默认子路由有疑问。

当我最初访问 localhost/listings 时，它会正确加载 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')
        }
      ]
    },
    
    ...
  ]
});

如果您想要默认子路由，则不应命名“父”路由器，因此应使用:to="{name: 'listing.index'}"，使用默认子路由的名称（例如:to="{name: 'listing.map'}").

代码应该如下所示：

window.router = new VueRouter({
routes: [

    ...

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

    ...

  ]
});