vue路由跳转动画_Vue页面跳转动画效果的实现方法

前言

现如今移动端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: '/', // 登录

name: 'Login',

component: Login

},

{