web-dev-qa-db-ja.com

デフォルトの子を持つ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')
                }
            ]
        },

        ...

    ]
});
vue.jsvuejs2
14
andershagbard

たぶん、子供を並べ替えてみてください、ルートは上から下に一致する順序で起動されますので、うまくいけば修正できます：

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ルート。

17
K3TH3R

デフォルトの子ルートが必要な場合は、「父」ルーターに名前を付けないでください。そのため、: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')
            }
        ]
    },

    ...

  ]
});
22
Sadraque Santos

named routesを使用していて、内部に子を含むコンポーネントをロードする場合は、子の名前ルートを使用する必要があります。
ナビゲーションメニューリンクで、parentに名前ルートを使用すると、子パスが何もない場合でも、子は自動的に読み込まれません。
たとえば、ユーザールートがあり、デフォルトでコンポーネント内にユーザーのリストを表示したいので、「/ user」パスに移動するたびに、ユーザーのリストを子としてロードしたいとしますそこ：

routes: [
   {
     path: '/user',
     name: 'User',
     component: User,
     children: [
       {path: '', name: 'UserList', component: UserList}, // <== child path is = '';
     ]
   }
  ]

コードについて考えると、「User」という名前のルーティングに行くと、親と子のパスが両方とも同じであるため、そこにUserListも含まれると想定するかもしれません。しかし、そうではなく、名前として「UserList」を選択する必要があります。なぜこれが起こっているのですか？ Vuejsは、URLではなく、参照している正確なコンポーネントをロードするためです。これを実際にテストできます。リンクで名前付きルートを使用する代わりに、URLを参照するだけです。今回はvuejsが親と子を一緒に問題なくロードしますが、名前付きルートを使用すると、 URLを参照し、参照しているコンポーネントをロードします。

0
Pooria Honarmand