如何为 Nuxt 3 基于页面的路由添加动态前缀？

Question

我正在 Nuxt 3 中开发一个多租户应用程序，其中大多数路由都以其组织的引用为前缀。例如：

/abc-org/questions
/abc-org/settings
/foo-co/questions
/foo-co/settings
...

使用 Nuxt3 的基于页面的路由实现此目的的最佳方法是什么？

看起来 baseURL 更适合您希望使用单个前缀提供整个站点的情况。有没有办法在不使用原始 Vue 路由器的情况下实现这一点？

Answer 1

有多种方法可以实现这一点（请查看文档）

对于您的示例，最简单的是具有以下文件结构：

/pages/[organization]/questions.vue
/pages/[organization]/settings.vue

这样您就可以在任何 .vue 中访问该组织：

const organization = route.params.organization // 'abc-org' or 'foo-co'

或者你可以在你的

app/router.options.ts

中采用这样的方法：

import type { RouterConfig } from '@nuxt/schema'

export default <RouterConfig> {
  // https://router.vuejs.org/api/interfaces/routeroptions.html#routes
  routes: (_routes) => [
    {
       name: `questions`,
       path: '/:organzation/questions',
       file: resolve(__dirname, '../pages/questions.vue'),
    },
    {
       name: `settings`,
       path: '/:organzation/settings',
       file: resolve(__dirname, '../pages/settings.vue'),
    },
  ],
}

再次：

const organization = route.params.organization // 'abc-org' or 'foo-co'

甚至：

import type { RouterConfig } from '@nuxt/schema'

export default <RouterConfig> {
  // https://router.vuejs.org/api/interfaces/routeroptions.html#routes
  routes: (_routes) => [
    {
       name: `organization`,
       path: '/:organzation/:section',
       file: resolve(__dirname, '../pages/organization.vue'),
    },
  ],
}

在organization.vue中：

const organization = route.params.organization // 'abc-org' or 'foo-co'
const section = route.params.section // 'settings' or 'questions'

别忘了申报

route

import { useRoute } from 'vue-router';
const route = useRoute();