VUE-ルータのルートは、二つの経路を入れ子になりました。

ルートを持つすべての時間は、ルート管理は非常に肥大化する場合は、少し混沌とした、ルーティング親子関係、ネストされたルーティングがさらに良くなります。ルーティング経路を意味し、すなわち、アセンブリは、ルートとルートナビゲーション容器（ルータリンク、ルータビュー）自分自身を持つことができるネストされた、構成がVUEアセンブリ<router-に、ネストされた子供の複数のレベルを介して達成することができますその上でビュー>。

1.ネストされたルートの使用シナリオ：

最も広くタブ、タブで、より多くの上部のナビゲーションバーには、メインディスプレイの真ん中に、あるコンテンツであり、この時間は、ページ全体が異なるコンテンツを表示するには、異なる経路を切り替えるためにタブをクリックし、ルートです、これは、本体の中央には経路がネストされた経路であるサブページルーティング経路に表示される内容です。

2.例を与えます：

アセンブリには：

<ルータビュー> 上の経路、経路が変化したとき、コンテンツ<ルータビュー>も変化によってマッピングコンポーネントをレンダリングするために使用されています

< テンプレート> 
    < divのクラス= "標準" > 
        < headerBack タイトル= "嵌套路由" > </ headerBack > 
        < divの> 
            < divのクラス= "タブ" > 
                < ルータリンクへ= "/標準/" > 
                    < DIV クラス= "子供" >我是A组件</ DIV > 
                </ ルータ・リンク> 
                < ルータリンクへ= "/標準/ B" >
                    < divのクラス= "子どもたち">我是B组件</ DIV > 
                </ ルータ・リンク> 
                < ルータリンクへ"/標準/ C" = > 
                    < divのクラス= "子供" >我是C组件</ DIV > 
                </ ルータリンク> 
            </ DIV > 
            < ルータビュー/> 
        </ DIV > 
    </ DIV > 
</ テンプレート>

インデックス中性子ルーティングルータの設定で：

    { 
      パス： '/標準' 、
      名前： '標準' 、
      コンポーネント：決意 =>必要（[ '@ /ページ/テンプレート/標準' ]、決意）、
      子供：[ 
        { 
          パス： 'A' 、
          コンポーネントは：解決 = >（[ '@ /ページ/練習/ A'が必要、]、解決）
        }、
        { 
          パス： 'B' 、
          成分：解決 =>（[ '@ /ページ/練習/ B'が必要、]、解決）
        } 、
        { 
          パス： 'C' 、
          コンポーネント：解決=>（[ '@ /ページ/練習/ C'が必要、]、解決）
        } 
      ] 
    }、

私は、私のルートはコンポーネントコンテンツでレンダリング私は成分bボタンコンテンツをレンダリングされたルート上のI成分b]ボタンをクリックして、私は成分cのルーティングされたボタンをクリックしますボタンアセンブリは、私のコンテンツcをレンダリングする成分でクリックしてください

 

私をクリックしてコンポーネントです。結果は以下の通りであります：

 

I bのコンポーネントをクリックして次のような効果があります。

I Cコンポーネントをクリックし、次のような効果があります。