我想在 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')
}
}
})
谢谢
根据 @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') } } })