具有不同布局的 vuejs 应用程序（例如登录布局、页面布局、注册等）

Question

我使用 vue-cli 生成了一个项目。我看到项目有一个 App.vue 这是应用程序的主要布局 - 如果我没记错的话。在这里，我放置了我的基本 HTML 布局和 <router-view></router-view> 。现在的问题是我需要完全不同的登录布局（不同的包装器，body 有不同的类），但我无法更改它，因为 App.vue 的模板有点“固定”作为布局。如何处理这个问题？有推荐的方法吗？

我是否应该创建代表布局的新组件，这样在这种情况下，我的 App.vue 模板将只有 <router-view></router-view> 然后将 LoginLayout.vue 包含在其中？

原文由 user2343398 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我想我找到了解决办法。该方法具有 App.vue 仅包含 <router-view></router-view> 然后包括表示布局的不同组件（如果需要，包含 <router-view> 和子路由）。我在 这里 找到了一个以这种方式使用它的项目。

我认为它使事情更加干净和有条理。恕我直言，隐藏所有定义布局结构的元素（所有 div）太混乱了——尤其是对于更大的应用程序。

原文由 user2343398 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

一个很好的解决方案是使用 插槽

首先创建你的“布局组件”

src/components/layouts/basic.vue

 <template>
  <div class="basic-layout">
    <header>[Company logo]</header>
    <hr>

    <slot/>

    <hr>
    <footer>
      Made with ❤ at Acme
    </footer>
  </div>
</template>

然后在另一个组件中使用它：

 <template>
  <layout-basic>
    <p>Hello world!</p>
  </layout-basic>
</template>

<script>
  import LayoutBasic from '@/components/layouts/basic'
  export default {
    components: {
      LayoutBasic
    }
  }
</script>

“Hello world”将出现在 <slot/> 标签所在的位置。

您还可以有多个带有名称的插槽，请参阅 完整的文档。

原文由 lipsumar 发布，翻译遵循 CC BY-SA 4.0 许可协议