VUE路由转场特效，WebAPP的前进与后退

一、效果图

二、思路

 1. 定义两个 CSS 过度动画，前进与后退： slide-right-enter   和   slide-left-enter

 2. 给路由配置meta信息，设置各个路由的级别： index

 3. 监控路由跳转，比对 meta 信息级别，如果从大跳转到小说明是返回，从小跳转到大则是前进

三、具体代码

APP.vue

 router.js

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'

Vue.use(Router)

export default new Router({
  // mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
      meta: { index: 1 }
    },
    {
      path: '/publish',
      name: 'publish',
      component: () => import('./views/Publish.vue'),
      meta: { index: 2 }
    },
    {
      path: '/personal',
      name: 'personal',
      component: () => import('./views/Personal.vue'),
      meta: { index: 2 }
    }
  ]
})