本文将带你了解WEBAPP开发之vue-router实现webApp页面切换效果，希望本文对大家学WEBAPP有所帮助。

对于给app页面切换时添加过渡效果，vue-router的官方文档中也有案例（https://router.vuejs.org/zh-cn/advanced/transitions.html）。此例是结合app实际的页面跳转情况，在官方案例的基础上做的补充和调整。相关文件如下：

index.html






main.js
newVue({
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
importVuefrom'vue'
importRouterfrom'vue-router'
importAppfrom'../App'
constHome=r=>require.ensure([],()=>r(require('../page/Home')),'Home')
Vue.use(Router)
//增强原方法：isBack作为标识来记录前进后退
Router.prototype.go=function(){
this.isBack=true
window.history.go(-1)
}
letroutes=[
{
path:'/',
component:App,
children:[
{
path:'',
redirect:'/home'
},
{
path:'/home',
name:'home',
component:Home
}
]
}
]
exportdefaultnewRouter({
mode:'history',
routes:routes,
scrollBehavior(to,from,savedPosition){
if(savedPosition){
returnsavedPosition
}else{
if(from.meta.keepAlive){
from.meta.savedPosition=document.body.scrollTop
}
return{x:0,y:to.meta.savedPosition||0}
}
}
})

App.vue
html代码


js代码
exportdefault{
data(){
return{
transitionName:'slide-left'
}
},
beforeRouteUpdate(to,from,next){
//如果isBack为true时，证明是用户点击了回退，执行slide-right动画
letisBack=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.4scubic-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()
}

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标移动开发之WebApp频道！