Nuxt基于域名的动态布局？

Question

我打算使用 nuxtJS（通用模式）开发白标项目。我的想法是当用户使用不同的域来到nuxtJS时，它会显示不同的布局。

例如， 如果用户 A 访问 www.aaa.com --> 在 layouts/aaa/default.vue 路径上显示布局

如果用户 A 访问 www.bbb.com --> 在 layouts/bbb/default.vue 路径上显示布局

任何人有一个想法或例子如何处理这个？

问候。

Answer 1

听起来像是一个奇怪的设置，但如果你确定这是你想要的；您可以设置一个中间件来检查请求的来源并返回一个可用于确定页面文件布局的值。

myMiddleware.js

export default function({ req, redirect }) {
  let host = req.get('host');
  if (host.includes('aaa')) {
    return 'aaaLayout.vue'
  } else if (host.includes('bbb') {
    return 'bbbLayout.vue'
  }
}

然后在您的页面中：

import middleware from '@/middleware/myMiddleware'
...
layout: middleware

可能需要进行调整以满足您的确切需求，但类似的方法会起作用。