1、监听路由变化
2种方式监听页面切换
// 方式1(引入第三方库vue-navigation) this.$navigation.on('forward', (to, from) => { // 动画类 this.transitionName = 'slide-left' }) this.$navigation.on('back', (to, from) => { this.transitionName = 'slide-right' })
// 方式2(路由对象route上加入自定义变量,重写router.go()方法) // 1.增强原方法,好处是旧的业务模块不需要任何变动 const goBack = Router.prototype.go Router.prototype.go = function () { this.isBack = true goBack.apply(this, arguments) } 2.监听路由变化 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() }
2、添加动画
// html
<transition :name="transitionName">
// 使用方式1监听路由切换时,需要加上该组件
<navigation>
<router-view class="page" />
</navigation>
</transition>
// css
.page {
transition: all .5s cubic-bezier(.55, 0, .1, 1);
}
.slide-left-enter, .slide-right-leave-active {
// 注意:必须使用absolute定位,否则切换动画时,为空白页面切换
position: absolute;
width: 100vw;
opacity: 0;
transform: translate(100%, 0);
}
.slide-left-leave-active, .slide-right-enter {
position: absolute;
width: 100vw;
opacity: 0;
transform: translate(-100%, 0);
}