Question

假设有两个子域可用于一个nuxt实例。它们应具有不同的页面结构。例如，可以是：

pages/
  index.vue // technical entry point that has some logic for determining what routes subtree should be used
  subdomain1/
    index.vue // entry point for subdomain1.mysite.com/
    page1.vue // entry point for subdomain1.mysite.com/page1
  subdomain2/
    index.vue // entry point for subdomain2.mysite.com/
    page1.vue // entry point for subdomain2.mysite.com/page1
    page2.vue // entry point for subdomain2.mysite.com/page2

文件夹结构可以不同。目标是能够为不同的子域加载不同的页面。 subdomain1.mysite.com/page1必须加载一个文件（例如pages/subdomain1/page1.vue），而subdomain2.mysite.com/page1必须加载另一个文件（例如pages/subdomain2/page2.vue）。

我们可以使用nuxtServerInit操作来确定子域，因此有一些this.$store.state.ux.subdomain变量是subdomain1或subdomain2。但是其余的对我来说还不清楚。

是否可以在nuxt.js中实现？如果是这样，我想应该以某种方式在nuxt.config.js中使用命名视图<nuxt-child :name="subdomain"/>和extendRoutes，但是到目前为止我还无法实现。任何帮助将不胜感激。

Answer 1

是的，可以使用nuxtJS处理多个子域。我已经为它创建了一个模块k-domains。您可以try it，也可以通过使用request.header.host模块修改路由，检查route.name是否与您的子域匹配，然后过滤路由并删除route.path和newRoutes = options.routes .filter(route => { // remove routes from other directories const toRemove = subdomains.filter(domain => { return domain != routesDirectory }) return !isUnderDirectory(route, toRemove); }) .map(route => { // remove directory from path and name if (isUnderDirectory(route, routesDirectory)) { return { ...route, path: route.path.substr(routesDirectory.length + 1) || "/", name: route.name.substr(routesDirectory.length + 1) || "index" }; } return route; });

的子域

Document document = new Document();

检查此link以获得确切的router.js代码。
这是project link，这是npm模块k-domains

这是指向article的链接，以供进一步说明

Answer 2

在pages/index.vue中，您应该可以切换正在使用的页面。但是我可能会将其余内容移到/pages之外，因为这些组件会自动生成为不同的路由。我会做类似的事情：

<template>
   <div>
      <component :is="currentPage" />
   </div>
</template>

<script>
// Dynamic imports will prevent both pages from being lodaded upfront
const page1 = () => import('@/components/views/page1')
const page2 = () => import('@/components/views/page2')

export default {

  computed: {
    currentPage() {}
      const currentSubdomain = this.$store.getters('ux.subdomain') // assuming you have a `getter` with that name
      return currentSubdomain === 'subdomain1' ? page1 : page2

  }
}
</script>

注意：我是从头顶上写的。具体实现可能会因您的情况而有所不同；）

文件夹结构如下：

├── pages/
│   ├── index.vue
├── components/
    └── views/
         ├── page1.vue
         └── page2.vue

Nuxt.js中不同子域的不同路由

2 个答案: