对于给app页面切换时添加过渡效果，vue-router的官方文档中也有案例（https://router.vuejs.org/zh-cn/advanced/transitions.html）。此例是结合app实际的页面跳转情况，在官方案例的基础上做的补充和调整。相关文件如下：
index.html
<body>
<div id="app">
<router-view></router-view>
</div>
</body>
main.js
new Vue({
router,
components: { App }
}).$mount('#app')
router配置
要实现页面前进后台动画，首先必须知道页面状态（即是页面是进入下一页，还是后退），我们可以通过改写router.go方法记录回退状态，页面如果需要回退时，调用this.$router.go(-1)，改写代码如下：
Router.prototype.go = function () {
this.isBack = true
window.history.go(-1)
}
router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import App from '../App'
const Home = r => require.ensure([], () => r(require('../page/Home')), 'Home')
Vue.use(Router)
// 增强原方法：isBack作为标识来记录前进后退
Router.prototype.go = function () {
this.isBack = true
window.history.go(-1)
}
let routes = [
{
path: '/',
component: App,
children: [
{
path: '',
redirect: '/home'
},
{
path: '/home',
name: 'home',
component: Home
}
]
}
]
export default new Router({
mode: 'history',
routes: routes,
scrollBehavior (to, from, savedPosition) {
if (savedPosition) {
return savedPosition
} else {
if (from.meta.keepAlive) {
from.meta.savedPosition = document.body.scrollTop
}
return { x: 0, y: to.meta.savedPosition || 0 }
}
}
})
App.vue
html代码
<template>
<div>
<transition :name="transitionName" mode="out-in">
<keep-alive>
<router-view v-if="$route.meta.keepAlive" class="child-view"></router-view>
</keep-alive>
</transition>
<transition :name="transitionName" mode="out-in">
<router-view v-if="!$route.meta.keepAlive" class="child-view"></router-view>
</transition>
</div>
</template>
js代码
export default {
data () {
return {
transitionName: 'slide-left'
}
},
beforeRouteUpdate (to, from, next) {
// 如果isBack为true时，证明是用户点击了回退，执行slide-right动画
let isBack = this.$router.isBack
if (isBack) {
this.transitionName = 'slide-right'
} else {
this.transitionName = 'slide-left'
}
// 做完回退动画后，要设置成前进动画，否则下次打开页面动画将还是回退
this.$router.isBack = false
next()
}
}
css代码
.child-view {
position: absolute;
width:100%;
transition: all .4s cubic-bezier(.55,0,.1,1);
}
.slide-left-enter, .slide-right-leave-active {
opacity: 0;
-webkit-transform: translate(50px, 0);
transform: translate(50px, 0);
}
.slide-left-leave-active, .slide-right-enter {
opacity: 0;
-webkit-transform: translate(-50px, 0);
transform: translate(-50px, 0);
}
！！！！还没有结束！！！！
页面跳转时回退除了this.$router.go(-1)以外，还可以通过this.$router.replace('上一个页面的路由地址')的方式返回前一个页面，那接下来要怎么操作呢？改写router.go方法已经不够用啦，那就看下去咯
需求场景：A页面进入B页面，B页面点击完成以后返回前一页，并且B页面需要传参给A页面，B页面点击完成的代码如下：
rightClick () {
this.$router.replace({
path: '/A',
query: {name: '传了个name'}
})
}
那么，在离开B页面之前，需要在B页面通过beforeRouteLeave来监听路由变化：
beforeRouteLeave (to, from, next) {
// 告诉路由要使用回退动画
this.$router.isBack = true
next()
}
YOYO，到这里，就全部都OK啦！
网友评论