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

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）。

我们可以使用nuxtServerInitaction 来确定子域，所以有一些this.$store.state.ux.subdomain变量是 eiter subdomain1 或 subdomain2。但其余的我不清楚。

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

Answer 1

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

\n\n

<template>\n   <div>\n      <component :is="currentPage" />\n   </div>\n</template>\n\n<script>\n// Dynamic imports will prevent both pages from being lodaded upfront\nconst page1 = () => import(\'@/components/views/page1\')\nconst page2 = () => import(\'@/components/views/page2\')\n\nexport default {\n\n  computed: {\n    currentPage() {}\n      const currentSubdomain = this.$store.getters(\'ux.subdomain\') // assuming you have a `getter` with that name\n      return currentSubdomain === \'subdomain1\' ? page1 : page2\n\n  }\n}\n</script>\n

\n\n

注：这是我凭空写下的。具体实施可能会因您的情况而异；）

\n\n

文件夹结构如下所示：

\n\n

\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 pages/\n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 index.vue\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 components/\n    \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 views/\n         \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 page1.vue\n         \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 page2.vue\n

\n