Vue.js 嵌套路由与默认子项 [英] Vue.js nested routing with default child

问题描述

我在 Vue.js 2 中遇到了默认子路由的问题.

I have an issue with a default children route in Vue.js 2.

当我最初访问 localhost/listings 时，它正确加载 index.vue 和 map.vue 作为子项.

When I visit localhost/listings initially, it correctly loads index.vue and map.vue as a child.

当我使用 router-link 导航到 localhost/listings/1，然后使用 router-link 导航回 localhost/listings 时，它仍然加载 show.vue 模板.这不应该发生?

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. This shouldn't happen?

我没有导航守卫或任何应该干扰的东西.有没有办法纠正这个?

I have no navigation guards or anything that should interfere. Is there anyway to correct this?

我的路线:

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

        ...

    ]
});

推荐答案

也许可以尝试重新安排子级，路由按照它们从上到下匹配的顺序触发，所以这有望解决它:

Maybe try re-arranging the children, routes are fired in the order they match from top-to-bottom, so this should hopefully fix it:

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

Just for a bit of clarification, your path: '' essentially serves as a "catch all", which is likely why when it's at the top it's being found immediately and so the router never propagates any further down to the :id route.

这篇关于Vue.js 嵌套路由与默认子项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！