Vue Router versucht, Routen mithilfe von Parametern als Namen abzugleichen.
P粉826429907
2023-07-27 21:18:01
<p>Ich versuche, Parameter in meinen Routen zu verwenden und habe die folgende Route erstellt. </p>
<pre class="brush:php;toolbar:false;">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'),
// }
// ]
// }
];</pre>
<p>Wenn ich versuche, /1 in die URL einzugeben, kann ich zu Verbrauchern navigieren, erhalte jedoch die folgende Fehlermeldung. </p>
<pre class="brush:php;toolbar:false;">vue-router.mjs:810 Nicht abgefangen (in Versprechen) Fehler: Keine Übereinstimmung für
{"name": "1", "params":{}}</pre>
<p>Wenn ich jedoch console.log in der Funktion afterEach verwende, um meine Zielroute zu drucken, erhalte ich das folgende Routenobjekt. </p><p>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. </p><p>Ich habe versucht, meine Routen von untergeordneten Routen in unabhängige Routen aufzuteilen, aber das hat nichts geändert. </p><p><br /></p>
<hr />
<p>Das Problem wurde gelöst und hat nichts mit den von mir definierten Routen zu tun. </p>
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
你遇到的问题可能是因为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')应该有用