Nuxt3嵌套路由异常：直接访问URL路径被篡改并报404

我在Nuxt3中搭建嵌套路由，文件/文件夹结构如下（仅展示问题相关部分）：

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

通过<NuxtLink>导航时可正常访问以下页面：

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

但刷新页面或直接访问domain.com/admin/users时，Nuxt会自动将路径改为domain.com/admin/admin-users，无法解析该URL并抛出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')
            }
        }
  })

问题原因及修复方案 #

核心原因 #

全局中间件auth.global.js中，自动登录成功后使用了navigateTo(to.name)。Nuxt的navigateTo方法若传入路由名称，会基于当前路由上下文进行相对导航，而非绝对匹配目标路由。当直接访问/admin/users时，路由名称admin-users会被当作相对路径拼接在当前/admin路径后，生成错误的/admin/admin-users路径。

修复步骤 #

将中间件中的return navigateTo(to.name)替换为以下任意一种写法：

// 方式1：跳转到完整请求路径
return navigateTo(to.fullPath)

// 方式2：通过路由对象指定路径
return navigateTo({ path: to.fullPath })

额外检查 #

• 确认Breadcrumb、NavigationSide等组件中没有错误的相对路由跳转逻辑
• 检查nuxt.config.ts中的routeRules配置，确保没有意外的路径重写规则

内容的提问来源于stack exchange，提问作者Bartas139