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

发布于11月23日

我对Vue中的默认 children 路由有问题.js 2.

当我最初访问localhost/listings时，它会正确地加载索引.vue和 map .小时候的vue.

当我使用路由链接导航到localhost/listings/1，然后使用路由链接返回到localhost/listings时，它仍然会加载节目.vue模板.This shouldn't happen?

我没有导航装置或任何干扰.有没有办法纠正这个问题？

我的路由:

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

        ...

    ]
});

推荐答案

也许可以try 重新安排子元素们，路由是按照他们从上到下匹配的顺序排列的，所以这应该有望解决这个问题:

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路由.