vue-router实现webApp切换页面动画效果代码

发布时间：2020-12-17 02:56:43 所属栏目：百科来源：网络整理

导读：vue-router实现webApp切换效果演示效果快速集成 1.复制PageTransittion.vue到项目目录。2.修改router配置。方案实现记录页面状态要实现页面前进后台动画，首先必须知道页面状态（即是页面是进入下一页，还是后退），我们可以通过改写router.Go方法记录

vue-router实现webApp切换效果

演示效果

快速集成

1.复制PageTransittion.vue到项目目录。2.修改router配置。

方案实现

记录页面状态

要实现页面前进后台动画，首先必须知道页面状态（即是页面是进入下一页，还是后退），我们可以通过改写router.Go方法记录回退状态，页面如果需要回退时，调用

修改router/index.vue

// 或者你可以新建一个方法
Router.prototype.goBack = function () {
this.isBack = true
this.go(-1)
}

当new Router时，实例就包含go/goBack方法。

监听路由变化

使用嵌套路由的方式引入子页面，监听根路由的update钩子做相应操作。

动画效果

通过transition执行动画

css代码

路由设置

router/index.js

github地址：https://github.com/zhengguorong/pageAinimate

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!