ネストされたルーティング
ルーティングとネスティングネストされたコンポーネント間の一致は非常に一般的な要件である、使用VUE-ルータは、単純にこれを達成することができます。
次のように我々はアプリケーションがあるとします。
< DIV ID = "アプリケーション"> < ルータビュー> </ ルータビュー> </ div>
<router-view> これは、チェーンの先頭です。これは、コンポーネントと一致する最上位のルーティングをレンダリングします。
。ルータマップ（{
'/ FOO ' ：{ // / fooへのルーティング、fooがコンポーネントコンポーネントをレンダリングするマッチング：フー}}）
同様に、内部の部品が入れ子になって独自の鎖を含んでいてもよいです <router-view> 。例えば、コンポーネントならば、私たちは Foo 、テンプレートを追加しました：
VARはFoo = {
テンプレート：
'<DIV CLASS = "foo"という> ' + '<H2>これがfooである</ H2>！' + '<ルータビュー> </ルータビュー> ' + // < -嵌套的外链'</ div> '}
ネストされた外側のチェーン内の各コンポーネントをレンダリングするために、我々は我々のルーティング設定を更新する必要があります。
。ルータの地図（{
'/ fooの' ：{コンポーネント：フー、// / fooのサブ設定ルートsubRoutesで：{ '/バー' ：{ // / fooの/バー、ますはFooの<ルータと交配するとき-view>レンダリング//コンポーネントのコンポーネントバー：バー}、「/バズを」：{ //バズがマッチングルートが/ FOO /バズ成分であろうことを除いて、同じである：バズ}}}}）
上記の構成を使用して、ときのアクセス /foo 時間、Foo 設定は任意のサブルートのアドレスと一致しないため、チェーンの外側には、何もレンダリングされません。あなたが何かをレンダリングする場合があります、そしてあなたは、サブルートの一致を設定することができます / ：
ルーター。地図（{
'/ fooの' ：{コンポーネント：フー、subRoutes ：{ '/ ' {：試合/ fooの、アセンブリは、<ルータビュー>にレンダリングされる@フー・アセンブリ。//簡単にするために、本明細書中で使用される、コンポーネントアセンブリの定義：{テンプレート：「<P>デフォルトのビューサブフー</ P>のための」}} //他のサブ経路}}}）