javascript - nuxt.js 中的布局真的有用吗？有什么好处？

Question

据我了解，布局仅有助于摆脱导入组件并不得不将每个页面包装在布局组件中。使用自动导入功能，您甚至可以摆脱导入。所以本质上你只是节省了将页面包装在布局组件中的需要。

没有组件而只有一个字符串 ( layout: "my-layout") 会降低灵活性，因为您不能将道具或事件从页面组件传递给布局组件。

使用布局时是否有性能或任何其他优势？我认为拥有一个布局文件夹是一种很好的做法，但我没有看到在选项 API 中添加布局道具的好处。

标签： javascriptvue.jslayoutnuxt.js

Answer 1

这篇文章/r/Nuxt很有趣：https ://www.reddit.com/r/Nuxt/comments/iy7a9u/eli5_difference_between_components_pages_and

我会引用一些有趣的回复：

布局：如果您有一些组件，您知道要在多个页面上使用（例如页眉和页脚），您可以将它们导入并添加到布局中，然后在需要它的页面上使用此布局. 无需单独导入这些必备组件并将这些组件单独添加到每个页面中，并且代码重复更少。此外，任何应该仅适用于特定页面的 css 定义都可以放在其中，而不必分别将它们添加到每个页面/组件中。

布局实际上只是顶级包装器组件，它们非常有助于将大量样板代码保留在一个位置，而不是将其插入到每个页面中。例如，我可以有一个博客布局，右侧是侧边栏，顶部是面包屑，左侧是小部件。我会创建一个“blog.vue”，这样我就可以保持我的页面干燥。

TLDR：您应该使用Layouts顶级包装器来保持干燥。他们不应该有任何道具，Pages因为他们正在包装它们。当然，一个组件也可以完成这方面的工作，但它有点冗长。
IMO 没有性能优势（一切都是组件），同时Layouts更具语义。