Vue Router tente de faire correspondre les routes en utilisant des paramètres comme noms.

Question

J'essaie d'utiliser des paramètres dans mes itinéraires et j'ai créé l'itinéraire suivant.

export const ConsumerRoutes = [
  {
    chemin : '/' + import.meta.env.VITE_MODULE_ADMIN_NAME + '/consumers',
    méta : {
      nécessiteAuth : vrai,
      adminLayout : vrai,
      module : 'admin',
      icône : UserCircleIcon,
      nav: 'Consommateurs'
    },
    enfants: [
      {
        chemin: '',
        nom : « Consommateurs »,
        composant : () => import('../../views/admin/Consumer.vue'),
      },
      {
        chemin : ':id',
        nom : 'Détails du consommateur',
        composant : () => import('../../views/admin/ConsumerDetails.vue'),
      }
    ],
  },

  // {
  // chemin : '/' + import.meta.env.VITE_MODULE_ADMIN_NAME + '/consumers/:id',
  // méta : {
  // nécessiteAuth : vrai,
  // adminLayout : vrai,
  // module : 'admin',
  // exclureFromNav : vrai
  // },
  // enfants: [
  // {
  // chemin: '',
  // nom : 'Détails du consommateur',
  // composant : () => import('../../views/admin/ConsumerDetails.vue'),
  // }
  // ]
  // }
];≪/pré>
<p>Lorsque j'essaie de saisir /1 dans l'URL, je peux accéder aux consommateurs, mais j'obtiens l'erreur suivante. </p>
<pre class="brush:php;toolbar:false;">vue-router.mjs:810 Non capturé (promis) Erreur : aucune correspondance pour
 {"name":"1","params":{}}

Cependant, si j'utilise console.log dans la fonction afterEach pour imprimer mon itinéraire cible, j'obtiens l'objet itinéraire suivant.

Il sait donc vers quel itinéraire je vais, mais pour une raison quelconque, il utilise « 1 » pour essayer de trouver un itinéraire nommé « 1 ». Si je change le nom de mon itinéraire en 1, il se charge correctement.

J'ai essayé de diviser mes routes des routes enfants en routes indépendantes, mais cela n'a rien changé.

Le problème a été résolu et n'a rien à voir avec les itinéraires que j'ai définis.

Answer 1

Le problème que vous rencontrez peut être dû au fait que Vue Router essaie de faire une correspondance en fonction du nom de l'itinéraire plutôt que du chemin.

Vous essayez d'accéder à /consumers/1, en vous attendant à ce que "1" soit un paramètre d'itinéraire (:id). Mais Vue Router interprète "1" comme nom de route, d'où le message d'erreur que vous voyez.

Assurez-vous de naviguer en utilisant le chemin de l'itinéraire et non le nom de l'itinéraire. Dans votre hook afterEach, utilisez le code suivant :

router.afterEach((to, from) => {
  router.push(to.path);
});

Lors de la navigation manuelle, utilisez le chemin («/consumers/1»), pas le nom. Si vous rencontrez toujours des problèmes, cela est probablement dû à une autre partie de votre code.

Voici un exemple de code pour accéder à un itinéraire par son nom :

router.push({ name: 'Consumer Details', params: { id: 1 } })

Voici également un exemple de code pour naviguer vers un itinéraire par chemin :

router.push('/consumers/1')

Ça devrait être utile