ネストされたVue.jsコンポーネントを使用したレイアウトの処理

Question

私たちは過去数ヶ月間私の会社でVue.jsを使用していました。私たちはUIのための要素UIとルーティングのためのvue-routerを使用しています。私たちのデータの構造に基づいて、ルートをいくつか深くネストします。

App -> 
    Line -> 
     Type -> 
      Component1 
      Component2 
      Component3 

当社のデザイナーでもすべての方法ダウンComponent*の内側に、ページごとにレイアウトを制御できるようにしたいと思います。それは次のようになります。たとえば、Component1にはサイドバーとフッタがあるレイアウトがあり、Component2にはサイドバーはありませんが、フッタは隠されています。

これはネストされた構造に基づいて複雑であることがわかりました。ページ上に別個のブロックとして表示されるコンポーネントの代わりに、それらは互いに内部に入れ子になっています。各Vueルートのネストを解除することもできますが、同じレベルにある多くのページでロジックを複製するリスクがあります。

このような入れ子構造でレイアウトを処理するには、どのような方法が良いでしょうか？

Answer 1

レイアウトがコンポーネントビルドとは別に指定されているように聞こえるので、できるだけ直交するようにしたいと思うでしょう。

追加データはmetaプロパティのルートに追加できます。

const routes = [ 
    { 
    path: '/', 
    name: 'Home', 
    component: Home, 
    meta: { hiddenFeatures: {sidebar: true, footer: false} } 
    }, 
    ... 

アプリケーションコンポーネントでは、ルート変更を監視し、追加の設定に基づいて表示フラグを設定します。アプリテンプレートで

export default { 
    name: 'app', 
    data() { 
    return { 
     ... 
     hiddenFeatures: {} 
    }; 
    }, 
    watch: { 
    '$route': function (route) { 
     this.hiddenFeatures = route.meta.hiddenFeatures || {} 
    } 
    }, 
} 

は、条件が正しい方法ラウンドロジックを取得することにより、

<template> 
    <div id="app"> 
    <div class="container-fluid"> 
     <sidebar v-if="!hiddenFeatures.sidebar"></sidebar> 

をレンダリング使用し、あなたはそれらのあなたが欲しいだけの（例えば）、一つ一つのルートにプロパティを追加することを避けることができます隠れる。