何为命名视图？
有时候想同时 (同级) 展示多个视图，而不是嵌套展示，例如创建一个布局，有 sidebar (侧导航) 和 main (主内容) 两个视图，这个时候命名视图就派上用场了。
你可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。
如果 router-view 没有设置名字，那么默认为 default
通俗点说：正常的一个网页，你想把当前页面拆分成多个部分，例如：左中右，那么在vue中我们可以通过简单的命名视图实现这一效果。
<router-view class="view one"></router-view>
<router-view class="view two" name="a"></router-view>
<router-view class="view three" name="b"></router-view>
一个视图使用一个组件渲染，因此对于同个路由，多个视图就需要多个组件。
确保正确使用 components 配置 (带上 s)
const router = new VueRouter({
routes: [
{
path: '/',
components: {
default: Foo,
a: Bar,
b: Baz
}
}
]
})
以上代码是vue官网中介绍的最简单的案例。
当然了，既然拆分成多个部分，我们就可以结合动画实现各个部分不同的切换效果。
示例：vue+animate.css+命名视图实现路由不同部分切换效果
- router.js
const routes = [
{
path: "/",
name: "slot",
component: slot
},
{
path: "/namedView",
name: "namedView",
components: {
ViewLeft: () => import("../components/namedViewLeft.vue"),
ViewCenter: () => import("../components/namedViewCenter.vue"),
ViewRight: () => import("../components/namedViewRight.vue")
}
}
];
- app.vue
<template>
<div id="app">
<div id="nav">
<router-link to="/home">主页</router-link> |
<router-link to="/namedView">命名视图</router-link> |
</div>
<router-view class="content" />
<router-view class="namedViewLeft animated fadeInLeft" name="ViewLeft"></router-view>
<router-view class="namedViewCenter animated bounceIn" name="ViewCenter"></router-view>
<router-view class="namedViewRight animated fadeInRight" name="ViewRight"></router-view>
</div>
</template>
<style>
#app {
width: 100%;
height: 100%;
overflow: hidden;
}
#nav {
padding: 30px;
width: 100%;
height: 50px;
text-align: center;
line-height: 50px;
font-size: 30px;
background: skyblue;
border-bottom: 3px solid #000;
}
#nav a {
font-weight: bold;
color: #2c3e50;
}
#nav a.router-link-exact-active {
color: #42b983;
}
.content {
width: 100%;
height: calc(100% - 50px);
text-align: center;
background: skyblue;
box-sizing: border-box;
padding: 20px 0;
}
.namedViewLeft {
width: 20%;
height: calc(100% - 50px);
float: left;
box-sizing: border-box;
border-right: 3px solid #000;
}
.namedViewCenter {
width: 60%;
height: calc(100% - 50px);
float: left;
}
.namedViewRight {
width: 20%;
height: calc(100% - 50px);
float: left;
box-sizing: border-box;
border-left: 3px solid #000;
}
</style>
- main.js
// 引入animate.css
import animated from "animate.css";
Vue.use(animated);
效果图：
在这里插入图片描述
示例二：
- app.vue
<template>
<div id="index">
<!-- 中间分为左边三个路由，中间上下两个路由，右边三个路由 -->
<transition name="top-transition" mode="out-in">
<router-view name="centerLeftTopView"></router-view>
</transition>
<transition name="left-transition" mode="out-in">
<router-view name="centerLeftCenterView"></router-view>
</transition>
<transition name="bottom-transition" mode="out-in">
<router-view name="centerLeftBottomView"></router-view>
</transition>
<transition name="top-transition" mode="out-in">
<router-view name="centerTopView"></router-view>
</transition>
<transition name="bottom-transition" mode="out-in">
<router-view name="centerBottomView"></router-view>
</transition>
<transition name="top-transition" mode="out-in">
<router-view name="centerRightTopView"></router-view>
</transition>
<transition name="right-transition" mode="out-in">
<router-view name="centerRightCenterView"></router-view>
</transition>
<transition name="bottom-transition" mode="out-in">
<router-view name="centerRightBottomView"></router-view>
</transition>
</div>
</template>
把路由分为更复杂的板块，实现更多的效果。
以上，就是vue使用命名视图的使用方法。
好了，如有问题，请指出，接受批评。
