路由重定向以及动画路由

本节讲解路由重定向以及动画路由。

路由重定向

根据路由匹配规则，6.2 节的案例只有当路径是 /login 或者 /register 时才能显示组件，初次加载页面组件是空白的，可以设置路由重定向，当初次加载页面时，定位到登录组件，代码如下。

var router = new VueRouter({
  routes: [{
      path: '/',
      redirect: 'login' // 这里的 login 是地址，不是组件名字
    },
    {
      path: '/login',
      component: login
    },
    {
      path: '/register',
      component: register
    }
  ]
})

当访问根路径时，使用 redirect 属性进行路径跳转，注意 redirect 属性值是路径地址，并不是组件的名字。

动画路由

使用路由也是可以添加动画效果的，当单击 “登录” 和 “注册” 按钮时，给组件的进入和离开添加动画效果，具体分为两步。

（1）使用 transition 包裹需要添加动画的元素。（2）添加两组类样式，代码如下。

<div id="app" v-cloak>
  <router-link to="/login">登录</router-link>
  <router-link to="/register">注册</router-link>
  <transition>
    <router-view></router-view>
  </transition>
</div>

<style>
  .v-enter,
  .v-leave-to {
    opacity: 0;
    transform: translateX(200px);
  }

  .v-enter-active,
  .v-leave-active {
    transition: all 1s ease;
  }
</style>

运行代码，组件之间的切换就有了动画效果。