vue.js 如何为Nuxt 3基于页面的路由添加动态前缀?

1bqhqjot  于 2023-11-21  发布在  Vue.js
关注(0)|答案(1)|浏览(330)

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

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

字符串
使用Nuxt3的page-based routing实现这一目标的最佳方法是什么?
看起来baseURL更适合于你希望整个网站都使用一个前缀的情况。有没有一种方法可以实现这一点而不需要丢弃到原始Vue路由器?

vlju58qv

vlju58qv1#

有几种方法可以实现这一点(请查看documentation
对于您的示例,最简单的方法是使用以下文件结构:

/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();

相关问题