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

【问题标题】：Different routes for different subdomains in Nuxt.jsNuxt.js 中不同子域的不同路由
【发布时间】：2019-07-20 06:35:20
【问题描述】：

假设有两个子域为一个 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 变量是子域1 或子域2。但其余的对我来说还不清楚。

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

【问题讨论】：

也在寻找这个问题的答案 - 拼命！如果有人知道如何做到这一点，请发表评论
我能够solve 这个通过使用site1、site2和共享文件夹定义特殊的项目文件夹结构，符号链接共享文件夹中的公共文件并运行2个nuxt进程，一个用于site1，另一个用于一个用于site2。

标签： routes vue-router nuxt.js

【解决方案1】：

是的，可以使用 nuxtJS 处理多个子域。我为此创建了一个模块k-domains。您可以try it 或者您也可以通过使用@nuxtjs/router 模块修改路由来获得相同的结果，检查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;
      });

查看link 以获取确切的 router.js 代码。
这里是project link，这里是npm模块k-domains

这里是article 的链接以获取更多说明

【讨论】：

【解决方案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

【讨论】：