Vue-js 및 다른 레이아웃

Question

라우터보기를 사용하면 레이아웃에 3 가지 레이아웃 (예 : 고객 레이아웃, 고용주 및 관리자 인터페이스 레이아웃)을 사용할 수 있습니다. App.vue 파일 내

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

: 순간

내가 좋아하는 고객 "보기"를 구현했습니다. 나는 다음과 같은 것을 사용할 수 있습니다 :

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

그리고 이러한 "서브 루트"에 대해 다른 헤더를로드 할 수 있지만 이것은 이상하게 보입니다. 또한 다른 index.html을 사용하고 싶습니다. 이 앱에 webpack을 사용하고 있습니다.

다른 용도로 사용 하시겠습니까?

많은 감사 르네는

Answer 1

당신은 dynamic components를 사용하여 시도 할 수 있습니다.

기본적으로 경로에 따라 렌더링되는 구성 요소를 변경합니다.

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

다음 앱이 기본 값을 가지고 있으며, 서로 다른 헤더를 사용해야 경로를 클릭하면 변경됩니다 데이터 객체의 heeaderComponent 속성을 포함 할 수 있습니다

그래서 아마이 같은 것 . 린스하고 바닥 글을 반복합니다.

마지막 질문은 한 가지 앱만 사용해야한다고 생각합니다. 가능한 한 모든 것이 연결되어 있습니다. 확실하지는 않지만 필요한 경우 Vue의 다른 인스턴스간에 의사 소통 할 수있는 방법을 알지 못합니다.