搜尋

首頁  >  問答  >  主體

Nuxt3 - 巢狀頁面結構無法正常運作

我想在 NUXT 3 中嵌套路由,所以我創建了這個文件/資料夾結構(僅顯示我遇到困難的部分):

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

當我透過 導航時,此資料夾結構運作良好 - 我可以訪問如下頁面:

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

問題是,當我重新載入頁面或直接造訪 url domain.com/admin/users NUXT 時,它會將其更改為 domain.com/admin/admin-users

#由於某種原因,NUXT 在直接存取時無法解析此 url,而不是透過 NuxtLink 並拋出 404 錯誤。有沒有辦法擁有這樣的頁面結構並解決意外的路徑變更?

編輯 1 發生了什麼影片

編輯2

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>

logged.vue(佈局)

<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(在該頁面上運行的唯一中間件)

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

謝謝

P粉842215006P粉842215006291 天前461

全部回覆(1)我來回復

  • P粉821231319

    P粉8212313192024-03-28 19:13:26

    根據 @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')
                }
            }
      })

    回覆
    0
  • 取消回覆