是否可以将布局信息从页面传递到 Nuxt 中的组件？

Question

我有 2 个默认布局 - 一个用于移动设备，一个用于桌面设备。我通过布局属性和用户代理中间件将它们分配到我的页面。

现在我想将该布局信息也传递给页面上使用的组件（例如作为道具），以便我可以为不同的设备构建相同组件的变体。那可能吗？如果是这样，这样做是好的做法还是这不是预期的布局用法？

Answer 1

提醒一下Nuxt中View的结构（布局是用来包裹页面的，因此layout只能在页面上使用）

与 shown here 一样，您可以在页面文件中使用一个函数并设置条件 while

<script>
export default {
  layout({ route }) {
    if (route.name === 'index') {
      return 'index-layout'
    } else {
      return 'some-other-one'
    }
  },
}
</script>

只要它在 Nuxt's context 中可用，您就应该能够完全使用它（通常，Nuxt 模块会在上下文中正确公开这些内容）。

如果这是一个好习惯，我会拒绝。
如今，我们应该编写代码，从移动优先到桌面视口。由于CSS.

，让整个事情变得自适应

您应该不为mobile和desktop使用2种不同的布局，因为它更容易设计。同时，如果出于某些 充分的理由 ，需要根据他们的用户代理提供完全不同的体验，也许您可以在这方面使用它。

但由于 Layouts 用于包装东西，有些人可能会争辩说您也可以这样做。
PS: 另外，如果我引用文档

Layouts are a great help when you want to change the look and feel of your Nuxt app. For example you want to include a sidebar or have distinct layouts for mobile and desktop.

我对此的立场是，它取决于您在这两种布局中的确切代码。
我倾向于认为这对于那些用例来说完全没问题（有相当不错的 UI 差异）：

管理员/访客
侧边栏/全屏界面

最后，布局基本上是一种代码分离约定，而不是真正独特的东西，因为它也可以是一个页面，其中嵌套了另一个页面。
另一方面不是，如果有一天你想嵌套一些布局，你可以实现它。

是否可以将布局信息从页面传递到 Nuxt 中的组件？

Is it possible to pass layout information from a page to a component in Nuxt?

nuxt.js