Vue Router打造丝滑的滚动控制与惊艳的路由动画

const router = createRouter({
  history: createWebHistory(),
  routes: [...],
  scrollBehavior(to, from, savedPosition) {
    // 返回滚动位置信息
    if (savedPosition) {
      // 有保存的位置时（如浏览器前进/后退）
      return savedPosition
    } else if (to.hash) {
      // 存在哈希锚点时
      return {
        el: to.hash,
        behavior: 'smooth' // 平滑滚动
      }
    } else {
      // 默认滚动到顶部
      return { top: 0, left: 0 }
    }
  }
})

scrollBehavior(to, from, savedPosition) {
  // 等待页面渲染完成后再滚动
  return new Promise((resolve) => {
    setTimeout(() => {
      if (savedPosition) {
        resolve(savedPosition)
      } else if (to.hash) {
        resolve({
          el: to.hash,
          behavior: 'smooth',
          // 添加偏移量，避免被固定导航栏遮挡
          top: 80
        })
      } else {
        resolve({ top: 0, left: 0 })
      }
    }, 300) // 等待300ms，确保动态内容已加载
  })
}

scrollBehavior(to, from, savedPosition) {
  // 为特定路由禁用自动滚动
  if (to.meta.noScroll) {
    return false
  }
  
  // 在特定路由中保持滚动位置
  if (from.meta.keepScroll && to.meta.keepScroll) {
    return {}
  }
  
  // 默认行为
  return savedPosition || { top: 0 }
}

<template>
  <RouterView v-slot="{ Component }">
    <Transition name="fade" mode="out-in">
      <component :is="Component" />
    </Transition>
  </RouterView>
</template>

<style>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>

<template>
  <RouterView v-slot="{ Component, route }">
    <Transition :name="transitionName">
      <component :is="Component" :key="route.path" />
    </Transition>
  </RouterView>
</template>

<script setup>
import { ref, watch } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const transitionName = ref('slide-left')

watch(() => router.currentRoute.value, (to, from) => {
  // 根据路由深度判断滑动方向
  const toDepth = to.path.split('/').length
  const fromDepth = from.path.split('/').length
  transitionName.value = toDepth < fromDepth ? 'slide-right' : 'slide-left'
})
</script>

<style>
.slide-left-enter-active,
.slide-left-leave-active,
.slide-right-enter-active,
.slide-right-leave-active {
  transition: all 0.3s ease;
  position: absolute;
  width: 100%;
}

.slide-left-enter-from {
  transform: translateX(100%);
  opacity: 0;
}

.slide-left-leave-to {
  transform: translateX(-100%);
  opacity: 0;
}

.slide-right-enter-from {
  transform: translateX(-100%);
  opacity: 0;
}

.slide-right-leave-to {
  transform: translateX(100%);
  opacity: 0;
}
</style>

// 路由配置
const routes = [
  {
    path: '/dashboard',
    component: Dashboard,
    meta: { transition: 'zoom' }
  },
  {
    path: '/settings',
    component: Settings,
    meta: { transition: 'fade' }
  }
]

<template>
  <RouterView v-slot="{ Component, route }">
    <Transition 
      :name="route.meta.transition || 'fade'"
      mode="out-in"
    >
      <component :is="Component" :key="route.path" />
    </Transition>
  </RouterView>
</template>

<style>
.zoom-enter-active,
.zoom-leave-active {
  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.zoom-enter-from {
  transform: scale(0.8);
  opacity: 0;
}

.zoom-leave-to {
  transform: scale(1.2);
  opacity: 0;
}
</style>

scrollBehavior(to, from, savedPosition) {
  // 如果启用了路由动画，延迟滚动
  if (to.meta.withAnimation) {
    return new Promise(resolve => {
      // 等待动画完成
      setTimeout(() => {
        resolve(savedPosition || { top: 0 })
      }, 500) // 与动画时长保持一致
    })
  }
  return savedPosition || { top: 0 }
}

<template>
  <div class="app-container">
    <AppHeader />
    <main class="main-content">
      <RouterView v-slot="{ Component, route }">
        <Transition
          :name="getTransitionName(route, $route)"
          @before-enter="onBeforeEnter"
          @after-enter="onAfterEnter"
          mode="out-in"
        >
          <KeepAlive :include="cachedRoutes">
            <component
              :is="Component"
              :key="route.fullPath"
              class="page-content"
            />
          </KeepAlive>
        </Transition>
      </RouterView>
    </main>
    <AppFooter />
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const previousRoute = ref(null)

// 动态计算过渡名称
const getTransitionName = (to, from) => {
  if (!from.name) return 'fade'
  
  const toDepth = to.meta.depth || 0
  const fromDepth = from.meta.depth || 0
  
  if (toDepth < fromDepth) return 'slide-right'
  if (toDepth > fromDepth) return 'slide-left'
  
  return to.meta.transition || 'fade'
}

// 动画生命周期钩子
const onBeforeEnter = () => {
  // 动画开始前的准备工作
  document.body.style.overflow = 'hidden'
}

const onAfterEnter = () => {
  // 动画结束后的清理工作
  document.body.style.overflow = ''
}

// 需要缓存的组件
const cachedRoutes = computed(() => {
  return router.getRoutes()
    .filter(route => route.meta.keepAlive)
    .map(route => route.name)
    .filter(Boolean)
})
</script>