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 实例之间进行通信。
如何布局 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 实例之间进行通信。