h5制作app，处理跳转翻页动画效果及android返回键路由跳转问题

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_34664239/article/details/90177820

在h5制作的app中，设计路由跳转及跳转翻页动画是最必要的。其中有很多需要注意的问题，分享下小编的处理方式~

一、翻页效果

首先，跳转翻页动画的监控，因为小编是用vue学的，所以在app.vue中监控路由变化，设置路由跳转动画

$route(to, from) {
	if (from.name === null) {
		this.transitionName = "";
	} else {
		if (!this.map[to.fullPath]) {
		this.map[to.fullPath] = +new Date() + 1;
	}
	if (!this.map[from.fullPath]) {
		this.map[from.fullPath] = +new Date();
	}
	if (this.map[to.fullPath] > this.map[from.fullPath]) {
		// 到子页面
		this.transitionName = "slide-forward";
	} else {
		// 到父页面
		this.transitionName = "slide-back";
	}
 }

css

.slide-forward-enter {
  transform: translate(100%);
}

.slide-forward-leave-to {
  opacity: 0;
}

.slide-forward-enter-to,
.slide-forward-leave {
  opacity: 1;
}

.slide-forward-enter-active,
.slide-forward-leave-active {
  transition: all 0.4s;
}

.slide-back-enter {
  opacity: 0;
}

.slide-back-leave-to {
  transform: translate(100%);
}

.slide-back-enter-to,
.slide-back-leave {
  opacity: 1;
  transform: translate(0);
}

.slide-back-enter-active,
.slide-back-leave-active {
  transition: all 0.4s;
}

问题

动画的问题是，同样的页面，如果在不同的地方显示，会造成和其他路由出现的顺序问题，为了避免这种状况，在不同的地方，使用同一个页面，最好设置成不同的路由！
否则如果相同的页面太多，路由跳转能恶心死你
实在分不开的页面，路由可以做判断，比如：

if (from.fullPath.indexOf('fencemana')!==-1 && (to.fullPath.indexOf('editcar')!==-1 || to.fullPath.indexOf('editminecar')!==-1)) {
  // 到父页面
 this.transitionName = "slide-back";
}

那在页面中怎么做区分呢？

{path: '/register/fencemana', name: 'FenceMana', component: FenceMana, meta: {name: 'registerFence',back: 'normal', islogin: false}}

可以用$route.meta.name来判断，当然还可以用别的

二、android返回键路由跳转

1.在固定页面点击两次返回退出app

在首页或者个人信息页面（某些固定页面），点击返回提示‘再点一次退出’，再点击则退出app

document.addEventListener("backbutton", function (e) { //调用原生方法
 let pageHash = window.location.hash;
 let back = person.$route.meta.back; //person是全局的vue实例化对象，相当于经常用的this
 if (back === 'exit') {
     if (exitAppTicker === 0) {
         exitAppTicker++;
         MintUI.Toast('再点一次退出');//UI插件提示信息
         setTimeout(function () {
             exitAppTicker = 0;
         }, 2000);
     } else if (exitAppTicker === 1) {
         navigator.app.exitApp(); //退出app
     }
 }
}

2.在app中页面，点击返回

在app中页面，点击返回，会返回上一层，但是直接history.back();，会出现问题，比如，从A跳到B，再手动返回A，这时候，点击手机的返回键，会造成死循环，所以此时，就需要自己做处理，强制跳转真正的上一层

一般，如果是路由的最后一层，直接返回上一层即可，中间的页面，需要自己处理，比如：

// 禁止返回
else if (back === 'refuse') {
    // 禁止
    e.preventDefault();
} else if (pageHash.indexOf('/mine/index') !== -1) {
    person.$router.push('/main');//person是全局的vue实例化对象，相当于经常用的this
} else if (pageHash.indexOf('/mine/carmana') !== -1) {
    person.$router.push('/mine/index');
}