Nuxt3 - Struktur halaman bersarang tidak berfungsi dengan betul

Question

Saya ingin membuat sarang laluan dalam NUXT 3, jadi saya mencipta struktur fail/folder ini (menunjukkan hanya bahagian yang saya mengalami kesukaran):

- Pages
   - Admin
     - Index.vue
     - Users
       - Index.vue
       - OtherRoute.vue

Struktur folder ini berfungsi dengan baik apabila saya menavigasi melalui - Saya boleh mengakses halaman seperti ini:

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

Masalahnya ialah apabila saya memuat semula halaman atau mengakses terus domain url.com/admin/users NUXT ia menukarnya kepada domain.com/admin/admin-users

Atas sebab tertentu NUXT tidak dapat menyelesaikan url ini apabila diakses terus dan bukannya melalui NuxtLink dan menimbulkan ralat 404. Adakah terdapat cara untuk mempunyai struktur halaman seperti ini dan menyelesaikan perubahan laluan yang tidak dijangka?

Edit 1 Video apa yang berlaku

Edit 2

Halaman Users.vue

<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>

log.vue(susun atur)

<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 (satu-satunya perisian tengah yang berjalan di halaman ini)

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

Terima kasih

Answer 1

Menurut petua @ReaganM, ralat terletak pada middleware:

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

Saya mengubah hala ke to.name，问题是嵌套路由的名称在我的情况下是像Folder-File那样构建的Admin-Users 。因此，我更改了这部分代码并重定向到 to.path dan ia berfungsi dengan baik.

perisian tengah terakhir

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