Nuxt3 – Verschachtelte Seitenstruktur funktioniert nicht richtig

Question

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

geändert wird

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

Answer 1

根据 @ReaganM 的提示，错误出在中间件中：

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

我正在重定向到to.name，问题是嵌套路由的名称在我的情况下是像Folder-File那样构建的Admin-Users 。因此，我更改了这部分代码并重定向到 to.path，效果很好。

最终中间件

export default defineNuxtRouteMiddleware(async (to, from) => {
    const { isLogged, proceedAutoLogin } = useAuthStore();
        if (!isLogged){
            if (to.name !== 'login'){
                if (await proceedAutoLogin()){
                    console.log(to)
                    return navigateTo(to.path)
                }else{
                    abortNavigation()
                    return navigateTo('/login')
                } 
            }
        }else{
            if (!await proceedAutoLogin()){
                abortNavigation()
                return navigateTo('/login')
            }
        }
  })