如何为Nuxt 3页面路由添加动态多租户组织前缀？

1. 用动态路由目录结构匹配租户前缀 #

这是最贴合Nuxt页面路由机制的实现方式，直接按以下结构创建页面文件：

pages/
├── [org]/
│   ├── questions.vue  # 对应路由 /:org/questions
│   ├── settings.vue   # 对应路由 /:org/settings
│   └── ...            # 其他租户专属页面
├── login.vue          # 无需租户前缀的公共页面（路由 /login）
└── 404.vue            # 全局404页面

Nuxt会自动识别[org]为动态路由参数，生成对应的路由规则，完全不需要手动配置Vue Router。

2. 全局中间件校验租户合法性 #

创建全局中间件统一处理租户的校验逻辑，避免每个页面重复写代码：
在middleware/tenant.global.ts中编写：

export default defineNuxtRouteMiddleware(async (to) => {
  // 排除不需要租户前缀的路由（比如登录、404等）
  const exemptRoutes = ['login', '404']
  if (exemptRoutes.includes(to.name as string)) return

  // 获取路由中的租户标识
  const orgId = to.params.org as string

  // 替换为你的实际校验逻辑：比如调用API验证租户是否存在、用户是否有权限访问
  const isValidTenant = await validateTenant(orgId)

  if (!isValidTenant) {
    // 租户不合法时跳转404或首页
    return navigateTo('/404')
  }

  // 将租户信息存入状态管理，供全局页面使用
  const tenantStore = useTenantStore()
  tenantStore.setCurrentOrg(orgId)
})

这个全局中间件会在所有路由跳转时自动执行，完成租户合法性校验。

3. 页面内获取并使用租户参数 #

在租户专属页面（比如[org]/questions.vue）中，可直接获取路由里的租户标识：

const route = useRoute()
const currentOrg = route.params.org as string

// 基于租户标识请求专属数据
const questions = await useFetch(`/api/${currentOrg}/questions`)

4. 导航时携带租户参数 #

使用<NuxtLink>跳转租户页面时，直接传入租户参数即可：

<template>
  <NuxtLink :to="{ name: '[org]-settings', params: { org: currentOrg } }">
    租户设置
  </NuxtLink>
  <!-- 也可以直接拼接路径 -->
  <NuxtLink :to="`/${currentOrg}/questions`">
    问答列表
  </NuxtLink>
</template>

<script setup>
const currentOrg = useTenantStore().currentOrg
</script>

5. 可选：租户专属布局 #

如果所有租户页面需要统一布局（比如带租户专属导航栏），可以创建layouts/tenant.vue，然后在租户页面中指定使用该布局：

// 在[org]/questions.vue中添加
definePageMeta({
  layout: 'tenant'
})

关于baseURL的补充 #

你说得没错，baseURL仅适合给整个站点设置固定前缀的场景，无法支持动态切换的多租户需求。上面的方案完全基于Nuxt原生的页面路由和中间件能力，不需要直接操作Vue Router就能实现动态租户前缀的需求。

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