现如今移动端APP对用户体验方面的要求越来越高了，最近致力于用户体验优化，因为需要实现类似APP页面切换的动画效果，百度google搜索资料不是很全，所以自己写文档，在实现效果的基础上，顺便恶补一波VueRouter及CSS过渡动画的知识点，欢迎有兴趣的朋友多多指教。
vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。
写在前面的思考
如何匹配到相应需要跳转的页面？
如何判断是“前进”还是“后退”而后使用不同的动画方式？
如何对不同的跳转设置动画效果？
实现过程
一、vue路由匹配
创建vue实例，匹配路由。
用Vue.js + Vue Router创建单页应用，是非常简单的。使用Vue.js，我们可以通过组合组件来组成应用程序，将Vue Router 添加进来之后，我们需要做的是，将组件(components)映射到路由(routes),然后告诉Vue Router 在哪里渲染它们。
import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) //如果使用模块化机制编程，导入Vue和VueRouter，就需要调用Vue.use(Router)
接下来就可以进行路由组件的映射：
(路由)组件的定义可以自行定义，当然，为了践行模块化组件化思想，多是从其他文件import进来。以下以简单的“登录->主页->点单->结算”四个页面的交互为例：
import Login from '@/components/login' import Index from '@/components/index' import PointList from '@/components/pointList/pointList' import SettLement from '@/components/pointList/settlement' //创建router实例，然后传入‘routes'配置 export default new Router({ //routes配置可以直接传入，也可以先定义后使用 //每个路由都应该映射一个组件，其中component可以是通过Vue.extend()创建的组件构造器， 或者只是一个组件配饰对象。(今天暂时不考虑嵌套路由的情况) routes: [ { path: 'https://www.jb51.net/', // 登录 name: 'Login', component: Login }, { path: '/index', // 主页 name: 'Index', component: Index }, { path: '/pointList', // 点单 name: 'PointList', component: PointList }, { path: '/settLement', // 结算 name: 'SettLement', component: SettLement } ] })
二、路由跳转 $router
组件路由除了使用全局组件 router-link 来实现点击跳转(相当于按钮)外，还可以使用组件本身具有的一个实例对象$router及其一些属性来达到目标。
$router 是VueRouter的一个实例对象，相当于一个全局的路由器对象。在Vue实例内部，你可以通过$router访问路由实例，里面含有很多属性和子对象，例如history对象，经常用到的跳转链接就可以调用this.$router.push，this.$router.push会往history栈中添加一个新记录。
<router-link :to="..." router.push(...)
点击 等同于调用 router.push(...)
(...)该方法的参数可以是一个字符串，或者一个描述地址的对象：
// 字符串 router.push('home') // 对象 router.push({ path: 'home' }) // 命名的路由 router.push({ name: 'user', params: { userId: 123 }}) // 带查询参数，变成 /register?plan=private router.push({ path: 'register', query: { plan: 'private' }})
组件路由跳转实例：
1.
<router-link :to="{name:'PointList', params: { userId: 123 }}"> <i><img src="https://www.jb51.net/assets/point.png" alt=""></i> <span>点单</span> </router-link>
2.
<footer @click="goPage('Author')">v 1.0</footer> //Js： methods: { goPage(url, param) { this.$router.push({ name: url }); } }
三、vue路由对象$route(只读)
在使用了vue-router的应用中，路由对象会被注入每个组件中，赋值为this.$route,并且当路由切换时，路由对象会被更新。所以route相当于当前正在跳转的路由对象，可以从里面获取name,path,params,query等，即包含了当前URL解析得到的信息，还有URL匹配到的路由记录。
路由对象暴露了以下属性(常见)：
1、$route.path
字符串(string)。等于当前路由对象的路径，会被解析为绝对路径，
如:#/login?name=aa，this.$route.path
，输出“/login”，即对应上面1中路由匹配时routes配置中的“path”；
2、$route.name