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