Nuxt3 - Struktur halaman bersarang tidak berfungsi dengan betul
P粉842215006
P粉842215006 2024-03-27 22:12:41
0
1
447

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

P粉842215006
P粉842215006

membalas semua(1)
P粉821231319

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')
            }
        }
  })
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan