23

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

        ...

    ]
});
4

4 に答える 4

27

子を再配置してみてください。ルートは上から下に一致する順序で起動されるため、うまくいけば修正されるはずです。

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ルートにそれ以上伝搬しない可能性があります。

于 2016-11-23T05:57:01.127 に答える