Vue-js 和不同的布局

Question

如何布局 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。

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

非常感谢雷内

Answer 1

您可以尝试使用 dynamic components。

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

所以它可能是这样的：

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

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

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

Vue-js 和不同的布局

Vue-js and different layouts

vue.js

vue-router