Vue router components 多层命名视图如何操作

独生政策的时候, 只有一个后代, 叫"孩子"肯定没错
但开放多胎之后, 就不止一个后代了, 如果对着所有后代喊"孩子", 谁都分不清是谁
这个时候就需要给后代命名

同理, 在路由中一个视图套一个视图时, 还能相安无事, 因为它们都叫 default
但一个视图套多个视图时, 就应该给视图加上 name 属性

<router-view></router-view>
<router-view name="a"></router-view>
<router-view name="b"></router-view>

相对的, component 要改成 components 以指明哪个视图渲染哪个组件

{
    
    
	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”

一级路径被匹配, 一级组件被渲染

<!--一级组件渲染结果-->
<一级组件>
	<router-view></router-view>
	<router-view name="view1"></router-view>
	<router-view name="view2"></router-view>
</一级组件>

二级路径被匹配, 根据 default: 二级组件_1, view1: 二级组件_2, view2: 二级组件_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>
</一级组件>

三级路径_1被匹配, 根据 default: 三级组件_1, view1: 三级组件_2, view2: 三级组件_3,
最终渲染得到的结构如下

<!--三级组件渲染结果-->
<一级组件>
	<二级组件_1>
		<三级组件_1 />
		<三级组件_2 />
	</二级组件_1>
	<二级组件_2>
		<三级组件_1 />
		<三级组件_2 />
		<三级组件_3 />
	</二级组件_2>
	<二级组件_2>
		<三级组件_1 />
		<三级组件_2 />
		<三级组件_3 />
	</二级组件_2>
</一级组件>

至此可以总结出几个结论

• 只要是同源的, 无论有多少个视图, 都可以按深度(层级)划分

如上例一级组件对应的是一级视图, 一级组件里直接包含的是二级视图
一级视图渲染一级组件, 二级视图渲染二级组件

• 视图可以同名, 可以复用
• 同层的重名就是复用, 不同层重名不影响
• components 为某视图提供组件会显示, 不提供组件也不报错, 只会渲染成空
• components 的作用范围是整层

如 path: “三级路径_1”, 下一行的 components 所设置的
因为它位于第三层, 所以对二级组件_1, 二级组件_2 的第三层视图都有效

end