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プロパティを含めることができます。リンスし、フッターを繰り返します。

最後の質問については、1つのアプリしか使用しないでください。それが可能なので、すべてがまだ接続されています。私はわかりませんが、必要であればVueのさまざまなインスタンス間でどのようにやりとりするか分かりません。