Question

如何设置路由器视图（如果有），可以说3个不同的布局用于您的应用（例如客户布局，雇主和管理界面布局）。

目前我实施了客户＆＃34;查看＆＃34;像：

<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>

并为那些＆＃34;子路由加载不同的标头＆＃34;但这似乎很奇怪。还有什么，如果我想使用其他index.html？我在这个应用程序中使用了webpack。

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

非常感谢雷

Answer 1

您可以尝试使用dynamic components。

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

所以它可能是这样的：

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

然后您的应用可以在数据对象中包含heeaderComponent属性，该属性具有默认值，并在您单击应使用不同标头的路由时进行更改。冲洗并重复页脚。

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

Vue-js和不同的布局

1 个答案: