有的时候想在页面中同时展示多个视图,而不是切换形式的嵌套展示,这个时候拥有多个出口的router-view就能很方便的实现;
现在有这么一个场景:有一个一个页面由左侧侧边栏tab页组成,右边是对应tab所显示的内容,其中一个tab的内容由2个组件构成,那么使用命名视图该如何实现?
下面就是实现的过程:
1、创建good-children.vue文件
<template>
<div class="box">
<div class="btns">
<router-link to="/class1" router-link-active="active">班级1的优秀学生信息</router-link>
<br>
<router-link to="/class2">班级2的优秀学生信息</router-link>
</div>
<div class="children">
<!--有多个出口的router-view 没有指定name的router-view默认值为default,指定name的需要与路由配置index.js中的值一致-->
<router-view></router-view>
<router-view name="studentExact"></router-view>
</div>
</div>
</template>
<script>
export default {}
</script>
<style scoped>
.box{
display: flex;
justify-content: space-around;
}
.box .btns{
width: 20%;
border:1px solid #000;
height: 200px;
line-height: 100px;
text-align: center;
}
.box .children{
width: 80%;
border:1px solid #000;
height: 200px;
line-height: 100px;
text-align: center;
}
.router-link-active{
background: #ffc325;
border: 1px solid #ffc325;
padding:5px 8px;
border-radius: 5px;
text-align: center;
text-decoration: none;
}
</style>
2、创建children1.vue文件
<template>
<div>
children1 用户详情
</div>
</template>
<script>
export default {}
</script>
<style scoped></style>
3、创建children2.vue文件
<template>
<div>
children2 用户详情
</div>
</template>
<script>
export default {}
</script>
<style scoped></style>
4、创建children3.vue文件
<template>
<div>
children3 用户详情
</div>
</template>
<script>
export default {}
</script>
<style scoped></style>
5、对路由文件index.js进行命名视图路由的配置
import Vue from 'vue';
import Router from 'vue-router';
import goodChildren from '@/components/good-children';
import children1 from '@/components/children1';
import children2 from '@/components/children2';
import children3 from '@/components/children3';
Vue.use(Router);
export default new Router({
routes: [
//命名视图的路由配置
{
path:'/good-children',
component:goodChildren,
children:[
{
path:'/class1',
component:children1
},
{
path:'/class2',
components:{
default:children2,
studentExact:children3
}
}
]
}
]
})
6、显示效果