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.length
    for (let i = arrLen - 1; i >= 0; i--) {
      if (router.customRouterData.history[i] == 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 arrStr
    arrStr = 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里面

<template>
  <router-view v-slot="{ Component }">
    <transition :name="$router.customRouterData.transitionName">
      <component :is="Component" />
    </transition>
  </router-view>
</template>

<script>
  export default {
    name: 'app'
  }
</script>

<style lang="stylus" scoped type="text/stylus">
  #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;
  }
</style>

3、现在我们正常使用路由切换就可以看到路由动画了，赶快试试吧。

this.$router.push({
  path: '/test'
})

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