Vue-js 和不同的布局

Vue-js and different layouts

如何布局 router-views,如果你有,假设 3 种不同的布局用于你的应用程序(例如,客户布局,雇主布局和 admin-interface)。

目前我实施客户 "view" 喜欢:

<template>
  <div id="app">
    <HeaderBar/>
    <Navigation></Navigation>
    <router-view></router-view>
  </div>
</template>

在 App.vue 文件中。我可以使用类似的东西:

<div id="app">
    <router-view name="header">
      <HeaderBar/>
      <Navigation></Navigation>
    </router-view>
    <router-view></router-view>
  </div>
</template>

并为那些 "subroutes" 加载不同的 headers 但这似乎很奇怪。 另外,如果我想使用其他 index.html 怎么办? 我正在为此应用程序使用 webpack。

或者您会建议为此创建不同的应用程序吗?

非常感谢 雷内

您可以尝试使用 dynamic components

基本上,您可以根据您的路线更改正在呈现的组件。

所以它可能是这样的:

<component v-bind:is="headerComponent"></component>

然后您的应用程序可以在数据 object 中包含 heeaderComponent 属性,它具有默认值,当您点击应该使用不同 [=23= 的路线时会发生变化].冲洗并重复页脚。

关于最后一个问题,我认为你应该只使用一个应用程序。因为这是可能的,而且一切都仍然是连接的。我不确定,但我不知道如果需要,您将如何在不同的 Vue 实例之间进行通信。