Vue Router versucht, Routen mithilfe von Parametern als Namen abzugleichen.

Question

Ich versuche, Parameter in meinen Routen zu verwenden und habe die folgende Route erstellt.

export const ConsumerRoutes = [
  {
    Pfad: '/' + import.meta.env.VITE_MODULE_ADMIN_NAME + '/consumers',
    Meta: {
      erfordertAuth: wahr,
      adminLayout: wahr,
      Modul: 'admin',
      Symbol: UserCircleIcon,
      nav: 'Verbraucher'
    },
    Kinder: [
      {
        Weg: '',
        Name: „Verbraucher“,
        Komponente: () => import('../../views/admin/Consumer.vue'),
      },
      {
        Pfad: ':id',
        Name: „Verbraucherdetails“,
        Komponente: () => import('../../views/admin/ConsumerDetails.vue'),
      }
    ],
  },

  // {
  // Pfad: '/' + import.meta.env.VITE_MODULE_ADMIN_NAME + '/consumers/:id',
  // Meta: {
  // erfordertAuth: true,
  // adminLayout: true,
  // Modul: 'admin',
  //excludeFromNav: true
  // },
  // Kinder: [
  // {
  // Weg: '',
  // Name: 'Verbraucherdetails',
  // Komponente: () => import('../../views/admin/ConsumerDetails.vue'),
  // }
  // ]
  // }
];

Wenn ich versuche, /1 in die URL einzugeben, kann ich zu Verbrauchern navigieren, erhalte jedoch die folgende Fehlermeldung.

vue-router.mjs:810 Nicht abgefangen (in Versprechen) Fehler: Keine Übereinstimmung für
 {"name": "1", "params":{}}

Wenn ich jedoch console.log in der Funktion afterEach verwende, um meine Zielroute zu drucken, erhalte ich das folgende Routenobjekt.

Es weiß also, zu welcher Route ich gehe, aber aus irgendeinem Grund verwendet es „1“ und versucht, eine Route mit dem Namen „1“ zu finden. Wenn ich meinen Routennamen in 1 ändere, wird es einwandfrei geladen.

Ich habe versucht, meine Routen von untergeordneten Routen in unabhängige Routen aufzuteilen, aber das hat nichts geändert.

---

Das Problem wurde gelöst und hat nichts mit den von mir definierten Routen zu tun.

Answer 1

你遇到的问题可能是因为Vue Router尝试根据路由的名称而不是路径进行匹配。

你试图导航到/consumers/1，希望"1"是一个路由参数(:id)。但是Vue Router将"1"解释为路由名称，因此你看到了错误消息。

确保你使用的是路由路径而不是路由名称进行导航。在你的afterEach钩子中，使用以下代码：

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

当手动导航时，请使用路径（'/consumers/1'），而不是名称。如果仍然遇到问题，可能是由于代码的其他部分。

以下是通过名称导航到路由的示例代码：

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

而且，以下是通过路径导航到路由的示例代码：

router.push('/consumers/1')

应该有用