Vue路由动画，根据路由路径切片长度

Vue路由动画，根据路由路径切片长度，支持H5Plus安卓返回

// 在路由文件中创建好的路由router
// router = createWebHashHistory(xxx)
// 移动端覆盖内容处理，下面为移动端补丁
router.beforeEach((to, from) => {
  const toDepth = to.path.split('/').length
  const fromDepth = from.path.split('/').length
  to.meta.transition = toDepth > fromDepth ? 'scale-slide-right' : 'scale-slide-left'
  titleRef.value = (to.meta.title as string) || document.title
})

// H5Plus支持
function plusReady() {
  // Android处理返回键
  plus.key.addEventListener('backbutton', function () {
    if (location.hash === '#/' || !location.hash) {
      // 入口页了，转入后台运行。
      const main = plus.android.runtimeMainActivity()
      main.moveTaskToBack(false)
    } else {
      router.back()
    }
  }, false)
}
if (window.plus) {
  plusReady()
} else {
  document.addEventListener('plusready', plusReady, false)
}

‍

<RouterView
  class="absolute"
  v-slot="{ Component, route }">
  <Transition :name="route.meta.transition as string">
    <Component :is="Component" />
  </Transition>
</RouterView>

.scale-slide-right-enter-active,
.scale-slide-right-leave-active {
  transition: all 0.3s ease;
}

.scale-slide-right-enter-from {
  left: 100%;
}

.scale-slide-right-enter-to {
  left: 0%;
}

.scale-slide-right-leave-from {
  transform: scale(1);
}

.scale-slide-right-leave-to {
  transform: scale(0.8);
}

.scale-slide-left-enter-active,
.scale-slide-left-leave-active {
  transition: all 0.3s ease;
}

.scale-slide-left-enter-from {
  left: -100%;
}

.scale-slide-left-enter-to {
  left: 0%;
}

.scale-slide-left-leave-from {
  left: 0%;
  /* transform: scale(1); */
}

.scale-slide-left-leave-to {
  left: 100%;
  /* transform: scale(0.8); */
}