Vue-js и различные макеты

Question

Как бы один макет отображал вид маршрутизатора, если у вас есть, скажем, 3 разных макета для вашего приложения (например, макет для клиентов, макет для работодателя и админ-интерфейс).

На данный момент я реализовал клиента "вид", как:

<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», но это, кажется, чтобы быть нечетным. И что, если я хотел бы использовать другой index.html? Я использую webpack для этого приложения.

Или вы предлагаете создать для этого различные приложения?

Большое спасибо Rene

Answer 1

Вы можете попробовать использовать dynamic components.

В основном вы меняете, какой компонент отображается в зависимости от вашего маршрута.

Так что, вероятно, будет что-то вроде этого:

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

, а затем приложение может содержать heeaderComponent свойство в объекте данных, который имеет значение по умолчанию и получает изменен при нажатии на маршрут, который должен использовать различный заголовок , Промойте и повторите для нижнего колонтитула.

Что касается последнего вопроса, я думаю, вы должны использовать только одно приложение. Как это можно сделать, и все еще связано. Я не уверен, но я не знаю, как бы вы, если понадобится, обмениваться информацией между различными экземплярами Vue.