vue3.x移動端頁面基於vue-router的路由切換動畫

移動端頁面切換一般都具有動畫，我們既然要做混合開發，做完之后還是不能看起來就像一個網頁，所以我們基於vue-router擴展了一個頁面切換push和pop的動畫。這是一篇比較硬核的帖子，作者花了不少精力來寫

先上效果圖

再貼核心代碼

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'
})

原創不易，轉載請注明出處，有什么問題歡迎留言指導。謝謝