Vue Router 学习 router-view页面存在多个

routes.js

import Todo from '../views/todo.vue'
import Login from '../views/login.vue'

export default [
  {
    path: '/',
    redirect: '/todo'
  },
  {
    path: '/all',
    components: {
      default: Todo,
      one: Login
    }  
  },
  {
    path: '/todo',
    component: Todo  
  },
  {
    path: '/login',
    component: Login,
    name: 'login'
  }
]

####App.vue

<template>
  <div id="app">
    <!-- 第一个 <router-view /> -->
    <transition name="fade">
      <router-view />
    </transition>
    <!-- 第二个 <router-view /> -->
    <router-view name="one"></router-view>

    <!-- router-link 跳转 -->
    <!-- 路径跳转 -->
    <router-link to="/todo">跳转Todo</router-link><br />
    <router-link to="/login">跳转Login</router-link><br />
    <router-link to="/all">跳转All</router-link>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>

<style scoped>
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>