一人っ子政策では、子孫は1人だけなので、「子」と呼んでもかまいません。
ただし、複数の出産を開始すると、複数の子孫が生まれます。すべての子孫に「子」と呼ぶと、誰もいません。
彼らが子孫の命名であるかを知ることができます
同様に、ビューがルーティングでビューを設定する場合でも、それらはすべてデフォルトと呼ばれるため安全です
が、ビューが複数のビューを設定する場合は、name属性をビューに追加する必要があります。
<router-view></router-view>
<router-view name="a"></router-view>
<router-view name="b"></router-view>
対照的に、コンポーネントをコンポーネントに変更して、どのビューがどのコンポーネントをレンダリングするかを示す必要があります
{
path: '/',
// component: Foo,
// components 优先级较高, 同时存在 component 会被忽略
components: {
default: Foo,
a: Bar,
b: Baz
}
}
では、複数のレイヤーと複数のビューがある場合、どのように操作しますか？
実際、想像したほど複雑ではありません。
new VueRouter({
routes: [{
path: "/一级路径",
component: 一级组件,
children: [{
path: "二级路径",
components: {
default: 二级组件_1,
view1: 二级组件_2,
view2: 二级组件_2,
},
children: [{
path: "三级路径_1",
components: {
default: 三级组件_1,
view1: 三级组件_2,
view2: 三级组件_3,
},
}],
}],
}]
});
<!--一级组件-->
<router-view></router-view>
<router-view name="view1"></router-view>
<router-view name="view2"></router-view>
<!--二级组件_1-->
<router-view></router-view>
<router-view name="view1"></router-view>
<!--二级组件_2-->
<router-view></router-view>
<router-view name="view1"></router-view>
<router-view name="view2"></router-view>
ケース分析
これで、一致するパスは「/第1レベルのパス/ 2番目のレベルのパス/ 3番目のレベルのパス_1」になります。
第1レベルのパスが一致し、第1レベルのコンポーネントがレンダリングされます
<!--一级组件渲染结果-->
<一级组件>
<router-view></router-view>
<router-view name="view1"></router-view>
<router-view name="view2"></router-view>
</一级组件>
デフォルトに従って、セカンダリパスが一致します：secondary component_1、view1：secondary component_2、view2：secondary component_2
<!--二级组件渲染结果-->
<一级组件>
<二级组件_1>
<router-view></router-view>
<router-view name="view1"></router-view>
</二级组件_1>
<二级组件_2>
<router-view></router-view>
<router-view name="view1"></router-view>
<router-view name="view2"></router-view>
</二级组件_2>
<二级组件_2>
<router-view></router-view>
<router-view name="view1"></router-view>
<router-view name="view2"></router-view>
</二级组件_2>
</一级组件>
3レベルのpath_1は、デフォルトに従って一致します：3レベルのcomponent_1、view1：3レベルのcomponent_2、view2：3レベルのcomponent_3、
最終的にレンダリングされる構造は次のとおりです。
<!--三级组件渲染结果-->
<一级组件>
<二级组件_1>
<三级组件_1 />
<三级组件_2 />
</二级组件_1>
<二级组件_2>
<三级组件_1 />
<三级组件_2 />
<三级组件_3 />
</二级组件_2>
<二级组件_2>
<三级组件_1 />
<三级组件_2 />
<三级组件_3 />
</二级组件_2>
</一级组件>
これまでのところ、いくつかの結論を引き出すことができます
- それらが同じ起源である限り、ビューがいくつあっても、深さ（レベル）で分割できます。
前の例と同様に、第1レベルのコンポーネントは第1レベルのビューに対応し、第1レベルのコンポーネントには第2レベルのビューが直接含まれます。第
1レベルのビューは、第1レベルのコンポーネントをレンダリングし、第2レベルのコンポーネントは第2レベルのビューをレンダリングします。ビューは、第2レベルのコンポーネントをレンダリングします。
- ビューは同じ名前を持つことができ、再利用できます
- 同じレイヤーの同じ名前が再利用され、異なるレイヤーの同じ名前は影響しません
- コンポーネントビューのコンポーネントを提供すると表示されます。コンポーネントが提供されていない場合、エラーは報告されず、空としてのみレンダリングされます。
- コンポーネントの範囲はレイヤー全体です
path： "third-level path_1"のように、次の行のコンポーネント
は3番目のレベルにあるため設定されているため、2番目のレベルのcomponent_1と2番目のレベルのcomponent_2の3番目のレベルのビューに有効です。
終わり