Ich wollte Routen in NUXT 3 verschachteln, also habe ich diese Datei-/Ordnerstruktur erstellt (die nur die Teile zeigt, mit denen ich Probleme habe):
- Pages - Admin - Index.vue - Users - Index.vue - OtherRoute.vue
Diese Ordnerstruktur funktioniert gut, wenn ich über
navigiere – ich kann auf Seiten wie diese zugreifen:
- domain.com/admin (Pages/Admin/index.vue) - domain.com/admin/users (Pages/Admin/Users/index.vue) - domain.com/admin/users/otherRoute (Pages/Admin/Users/otherRoute.vue)
Das Problem ist, dass wenn ich die Seite neu lade oder direkt auf die URL domain.com/admin/users NUXT zugreife, diese in domain.com/admin/admin-users
Aus irgendeinem Grund kann NUXT diese URL nicht auflösen, wenn direkt statt über NuxtLink darauf zugegriffen wird, und gibt einen 404-Fehler aus. Gibt es eine Möglichkeit, eine solche Seitenstruktur zu haben und unerwartete Pfadänderungen zu beheben?
Bearbeiten 1 Was ist passiert, Video
Edit 2
Users.vue-Seite
<template> <TitleH1>Users</TitleH1> <TileList :tiles='tiles'></TileList> </template> <script setup> definePageMeta({ layout: "logged", }); const tiles = [ {title: 'Users', icon: 'ic:baseline-supervisor-account', to: '/admin/users'}, {title: 'Roles', icon: 'material-symbols:lock-person', to: '/admin/roles'}, {title: 'Units', icon: 'ph:tree-structure', to: '/admin/units'}, ] </script>
logged.vue(Layout)
<template> <NavigationMain :key="$route.name" /> <div class="flex"> <NavigationSide /> <div class="w-full"> <div class="px-4 md:mx-auto xl:px-36"> <Breadcrumb /> <slot></slot> </div> <NotificationHub /> </div> </div> </template>
auth.global.js (die einzige Middleware, die auf dieser Seite ausgeführt wird)
export default defineNuxtRouteMiddleware(async (to, from) => { const { isLogged, proceedAutoLogin } = useAuthStore(); if (!isLogged){ if (to.name !== 'login'){ if (await proceedAutoLogin()){ return navigateTo(to.name) }else{ abortNavigation() return navigateTo('/login') } } }else{ if (!await proceedAutoLogin()){ abortNavigation() return navigateTo('/login') } } })
Danke
根据 @ReaganM 的提示,错误出在中间件中:
我正在重定向到
to.name
,问题是嵌套路由的名称在我的情况下是像Folder-File
那样构建的Admin-Users
。因此,我更改了这部分代码并重定向到to.path
,效果很好。最终中间件