vue3.x移动端页面基于vue-router的路由切换动画

家电维修

移动端页面切换一般都具有动画，我们既然要做混合开发，做完之后还是不能看起来就像一个网页，所以我们基于vue-router扩展了一个页面切换push和pop的动画。这是一篇比较硬核的帖子，作者花了不少精力来写先上效果图
路由切换动画.gif再贴核心代码
router文件夹下，新建transition-extend.js文件，实现如下：
/*** router扩展，页面切换动画*/// 负责SessionStorage存储路由历史。const SessionStorage_key_Router_Extend_History = 'SessionStorage_key_Router_Extend_History'function transitionExtend(orgin) {// 通过原路由对象创建一个新的对象let router = Object.create(orgin)// 扩展对象，保存当前栈数组和过渡动画名称router.customRouterData = {transitionName: '',history: []}// 路由位置字符串在数组中的位置router.indexOf = function (path) {let arrLen = router.customRouterData.history.lengthfor (let i = arrLen - 1; i >= 0; i--) {if (router.customRouterData.history == path) {return i;}}return -1;}// 添加历史路由去路由数组router.addRouterPath = function(path) {router.customRouterData.history.push(path)sessionStorage.setItem(SessionStorage_key_Router_Extend_History, JSON.stringify(router.customRouterData.history));}// 历史路由数组移除某个路由，n为参数可以移除多个router.removeLastRouterPath = function (n = 1) {if (n > 0) {for (let i = 0; i < n; i++) {router.customRouterData.history.pop()}sessionStorage.setItem(SessionStorage_key_Router_Extend_History, JSON.stringify(router.customRouterData.history));}}// 初始化，为了页面刷新能恢复路由记录等router.initRouterPaths = function (toPath) {// 当存储了 router paths 时候，读取并赋值let arrStrarrStr = sessionStorage.getItem(SessionStorage_key_Router_Extend_History);if (arrStr && arrStr != undefined) {let arr = JSON.parse(arrStr)if (Array.isArray(arr) && arr.length > 0) {// 进入页面router.customRouterData.history = arr;} else {// 新进入页面router.customRouterData.history = []router.customRouterData.history.push(toPath)}} else {// 新进入页面router.customRouterData.history = []router.customRouterData.history.push(toPath)}// 存储为了恢复sessionStorage.setItem(SessionStorage_key_Router_Extend_History, JSON.stringify(router.customRouterData.history));}// push 修改路由历史，并设置动画router.push = function () {let location = arguments[0]if (typeof location == 'string') {router.addRouterPath(location)} else {router.addRouterPath(location.path)}router.customRouterData.transitionName = 'slide_left'router.__proto__.push.call(this, ...arguments)};// replace 修改路由历史，并设置动画router.replace = function () {router.removeLastRouterPath()let location = arguments[0]if (typeof location == 'string') {router.addRouterPath(location)} else {router.addRouterPath(location.path)}router.customRouterData.transitionName = 'slide_left'router.__proto__.replace.call(this, ...arguments)};// go 修改路由历史，并设置动画router.go = function (n) {if (n > 0) {// 禁止使用，这种情况比较复杂，使用较少，先忽略console.error('router.go 暂不支持 前进 ！');return;}router.removeLastRouterPath(-n)router.customRouterData.transitionName = 'slide_right'router.__proto__.go.call(this, n)};// back 修改路由历史，并设置动画router.back = function () {router.removeLastRouterPath()router.customRouterData.transitionName = 'slide_right'router.__proto__.go.call(this, -1)};router.forward = function () {// 禁止使用，这种情况比较复杂，使用较少，先忽略console.error('router.forward 暂不支持 ！');return ;};/*** 按钮前进后退处理处理* 返回：测滑返回，微信返回按钮，web返回按钮，以及android物理返回，android测滑返回* 前进：微信上的前进按钮，web前进* // 前进这里有个坑，待解决，先忽略**/router.otherEventTransitionName = function (toPath, fromPath) {if (router.customRouterData.transitionName != '') {// 没有数据意味着从，其他操作方式得到的路由变化return;}let toIndex = router.indexOf(toPath)if (toIndex == -1 || router.customRouterData.history.length - toIndex != 2) {// 不存在，并且历史router.addRouterPath(toPath)router.customRouterData.transitionName = 'slide_left'} else {router.removeLastRouterPath()router.customRouterData.transitionName = 'slide_right'}}// 是否已经初始化let isInit = false;// 跳转之前router.beforeEach((to, from, next) => {if (isInit) {router.otherEventTransitionName(to.path, from.path)} else {isInit = true;router.initRouterPaths(to.path)}next();})// 跳转之后router.afterEach((to, from) => {setTimeout(() => {// 使用动画之后立即移除router.customRouterData.transitionName = ''}, 300)})return router}export default transitionExtend使用
1、对全局router对象进行扩展，一般在router/index.js里面
// 引入扩展函数import transitionExtend from "./transition-extend";// 对router对象扩展router = transitionExtend(router)// export 扩展后的路由对象export default router
2、为router-view添加过渡动画，一般在app.vue里面
#app {position relative;width 100%;height 100%;}.slide_left-enter-active, .slide_left-leave-active, .slide_right-enter-active, .slide_right-leave-active {transition: all 0.3s;position absolute !important;background-color white;left 0;right 0;top 0;bottom 0;z-index 1;}.slide_left-enter-from, .slide_right-leave-to {opacity 1;transform: translateX(100%);}.slide_right-enter-from, .slide_left-leave-to {opacity 1;transform: translateX(-100%);}.slide_left-leave-to, .slide_right-leave-to {opacity 0.3;}
3、现在我们正常使用路由切换就可以看到路由动画了，赶快试试吧。
this.$router.push({path: '/test'})


原创不易，转载请注明出处，有什么疑问欢迎留言指导。谢谢