Vue移动端仿APP左右滑动前进后退效果

很多APP的前进和后退都是有效果的。例如前进是左滑，后退是右滑。本文将介绍如何使用Vue来做这个效果。本文实现这个效果的原理很简单。即：在各个页面定义层级，在切换路由判断用户是进入哪一层页面，如果用户进入更高层的页面那么就做前进动画，反之做后退动画。

1. 首先进行路由配置

进入router.js文件

	import Vue from 'vue'
	import Router from 'vue-router'
	// 下面组件自行定义
	import Home1 from '@/home1'
	import Home2 from '@/home2'
	Vue.use(Router)
	
	export default new Router({
		routes: [
			{
				path: '/',
				name: 'Home',
				// 重点
				meta: {
					index: 0
				},
				component: Home
			},
			{
				path: '/home1',
				name: 'home1',
				// 重点
				meta: {
					index: 1
				},
				component: Home1
			},
			{
				path: '/home2',
				name: 'home2',
				// 重点
				meta: {
					index: 2
				},
				component: Home2
			}
		]
	})

2. 监控路由跳转

进入App.vue文件，监控路由跳转，判断切换页面之间层级关系，以此来判断路由前进或者后退.

	<template>
		<div id = 'app'>
			<tansition :name = 'slideName'>
				<router-view class = 'routerLink ' />
			</transition>
		</div>
	</template>
	<script>
		export default {
			name: 'app',
			data () {
				return {
					// 定义变量
					slideName: ''
				}
			},
			watch: {
				// 使用watch监听$router的变化
				// to为跳转之后的路由，from为跳转之前的路由
				'$route' (to, from) {
					// 如果to索引大于from索引，说明为前进状态，反之后退状态
					if (to.meta.index > from.meta.index) {
						// 设置动画名称
						this.slideName = 'slide-left'
					} else {
						this.slideName = 'slide-right'
					}
				}
			}
		}
	</script>

3. 编写滑动类动画

	/* 前进后退样式 */
.routerLink {
  transition: all 0.2s ease;
}
.slide-left-enter,
.slide-right-leave-active {
  opacity: 0;
  -webkit-transform: translate(100%, 0);
  transform: translate(100%, 0);
}
.slide-left-leave-active,
.slide-right-enter {
  opacity: 0;
  -webkit-transform: translate(-100%, 0);
  transform: translate(-100% 0);
}

至此。仿App左右滑动切换页面效果已全部实现。