页面为访问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
最后结果