vue 使用多个router-view

页面为访问index的时候，同时加载p1-p4

 index页

<template>
	<div class="main">
		<div>
			<router-view name="p1" v-slot="{ Component }">
				<keep-alive>
					<component class="view" :is="Component" />
				</keep-alive>
			</router-view>
		</div>
		<div>
			<router-view name="p2" v-slot="{ Component }">
				<keep-alive>
					<component class="view" :is="Component" />
				</keep-alive>
			</router-view>
		</div>
		<div>
			<router-view name="p3" v-slot="{ Component }">
				<keep-alive>
					<component class="view" :is="Component" />
				</keep-alive>
			</router-view>
		</div>
		<div>
			<router-view name="p4" v-slot="{ Component }">
				<keep-alive>
					<component class="view" :is="Component" />
				</keep-alive>
			</router-view>
		</div>
	</div>
</template>

<script>
</script>

<style>
	.main {
		padding: 0;
		margin: 0;
		width: 100%;
		height: 100px;
	}

	.main div {
		float: left;
		width: 50%;
		height: 100%;
	}

	.cdiv1 {
		background-color: #780931;
		width: 100%;
		height: 100%;
	}

	.cdiv2 {
		background-color: #758933;
		width: 100%;
		height: 100%;
	}

	.cdiv3 {
		background-color: #456789;
		width: 100%;
		height: 100%;
	}

	.cdiv4 {
		background-color: #123456;
		width: 100%;
		height: 100%;
	}
</style>

4个子页

<template>
	<div class="cdiv1">1</div>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		created() {
			console.log('p1','p1')
		},
		mounted() {
		},
		methods: {
	
		},
	}
</script>

<style>
	
</style>

关键路由设置，必须是一个嵌套路由，不能写component了，改成components，p1,p2对应index页的<router-view name="p1"></router-view>的name；文档都看懵逼了。。。还好拼出来了。

children: [{
            path: '/main',
            components: {
                p1: () => import('@/view/main/p1.vue'),
                p2: () => import('@/view/main/p2.vue'),
                p3: () => import('@/view/main/p3.vue'),
                p4: () => import('@/view/main/p4.vue'),
            }
        }

 完整路由

let main = [{
		path: '/',
		redirect: "/main"
	},
	{
		path: '/main',
		name: 'main',
		component: () => import('@/view/main/index.vue'),
		meta: {
			title: '4个routerview',
		},
		children: [{
			path: '/main',
			components: {
				p1: () => import('@/view/main/p1.vue'),
				p2: () => import('@/view/main/p2.vue'),
				p3: () => import('@/view/main/p3.vue'),
				p4: () => import('@/view/main/p4.vue'),
			}
		}, ]
	}
]

export default main

最后结果