vue使用命名视图实现同一路由拆分

何为命名视图？

有时候想同时 (同级) 展示多个视图，而不是嵌套展示，例如创建一个布局，有 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使用命名视图的使用方法。
好了，如有问题，请指出，接受批评。