web-dev-qa-db-fra.com

Routage imbriqué Vue.js avec enfant par défaut

J'ai un problème avec une route enfants par défaut dans Vue.js 2.

Lorsque je visite initialement localhost/listings, il charge correctement index.vue et map.vue comme un enfant.

Lorsque je navigue en utilisant router-link vers localhost/listings/1, puis en utilisant router-link vers localhost/listings, il charge toujours le modèle show.vue. Cela ne devrait pas arriver?

Je n'ai pas de gardes de navigation ou quoi que ce soit qui puisse interférer. Y a-t-il un moyen de corriger cela?

Mes parcours:

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

Essayez peut-être de réorganiser les enfants, les itinéraires sont tirés dans l'ordre qu'ils correspondent de haut en bas, donc cela devrait, espérons-le, le corriger:

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

    ...

  ]
});

Juste pour un éclaircissement, votre path: '' sert essentiellement de "fourre-tout", ce qui est probablement la raison pour laquelle quand il est en haut, il est trouvé immédiatement et donc le routeur ne se propage plus vers le bas vers le :id route.

17
K3TH3R

Le routeur "père" ne doit pas être nommé si vous voulez une route enfant par défaut, donc utilisez plutôt :to="{name: 'listing.index'}", utilisez le nom de la route enfant par défaut (par exemple :to="{name: 'listing.map'}").

Le code devrait ressembler à ceci:

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

Lorsque vous utilisez named routes et vous voulez charger le composant avec votre enfant à l'intérieur, vous devez utiliser la route de nom pour l'enfant.
Dans les liens de votre menu de navigation, si vous utilisez la route de nom pour le parent, l'enfant ne se chargera pas automatiquement, même si le chemin d'accès de l'enfant n'est rien.
Disons par exemple que nous avons un itinéraire utilisateur, et que nous voulons afficher la liste des utilisateurs à l'intérieur du composant par défaut, donc chaque fois que nous allons sur le chemin "/ user", nous voulons charger une liste d'utilisateurs en tant qu'enfant dans Là:

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

Si vous pensez au code, vous pouvez supposer que si vous allez sur la route avec le nom "User", vous pouvez également y placer UserList, car le chemin d'accès pour le parent et les enfants est le même. mais ce n'est pas le cas et vous devez choisir 'UserList' pour le nom. Pourquoi cela se produit-il? Parce que Vuejs charge le composant exact auquel vous faites référence, pas l'url. vous pouvez réellement tester cela, au lieu d'utiliser la route nommée dans vos liens, vous pouvez simplement faire référence à l'url, cette fois vuejs chargera le parent et l'enfant sans problème, mais lorsque vous utilisez la route nommée, elle ne regarde pas le url et charge le composant auquel vous faites référence.

0
Pooria Honarmand