Under the one-child policy, there is only one offspring, so it’s okay to call it a "child".
But after opening multiple births, there will be more than one offspring. If you call "child" to all the offspring, no one can tell who
it is at this time. Descendant Naming
In the same way, when a view sets a view in the routing, it can still be safe, because they are all called default
but when a view sets multiple views, the name attribute should be added to the view
<router-view></router-view>
<router-view name="a"></router-view>
<router-view name="b"></router-view>
In contrast, component should be changed to components to indicate which view renders which component
{
path: '/',
// component: Foo,
// components 优先级较高, 同时存在 component 会被忽略
components: {
default: Foo,
a: Bar,
b: Baz
}
}
So how do you operate when there are multiple layers and multiple views?
In fact, it is not as complicated as imagined
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>
Case analysis
Now the matching path is "/first-level path/second-level path/third-level path_1"
The first-level path is matched, and the first-level component is rendered
<!--一级组件渲染结果-->
<一级组件>
<router-view></router-view>
<router-view name="view1"></router-view>
<router-view name="view2"></router-view>
</一级组件>
The secondary path is matched, according to default: 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>
</一级组件>
The three-level path_1 is matched, according to default: three-level component_1, view1: three-level component_2, view2: three-level component_3, the
final rendered structure is as follows
<!--三级组件渲染结果-->
<一级组件>
<二级组件_1>
<三级组件_1 />
<三级组件_2 />
</二级组件_1>
<二级组件_2>
<三级组件_1 />
<三级组件_2 />
<三级组件_3 />
</二级组件_2>
<二级组件_2>
<三级组件_1 />
<三级组件_2 />
<三级组件_3 />
</二级组件_2>
</一级组件>
So far, several conclusions can be drawn
- As long as they are of the same origin, no matter how many views there are, they can be divided by depth (level)
As in the previous example, the first-level component corresponds to the first-level view, and the first-level component directly contains the second-level view. The
first-level view renders the first-level component, and the second-level view renders the second-level component.
- Views can have the same name and can be reused
- Duplicate names in the same layer are reused, and duplicate names in different layers do not affect
- components Provide components for a view will be displayed, if no components are provided, no error will be reported, and will only be rendered as empty
- The scope of components is the entire layer
Such as path: "third-level path_1", the components in the next line are set
because it is located at the third level, so it is valid for the third-level view of the second-level component_1 and the second-level component_2
end