当前位置：首页 > VUE

vue实现新旧页面切换

2026-02-21 15:55:06VUE

路由切换动画

在Vue中可以通过<transition>组件结合Vue Router实现页面切换动画。在App.vue或布局组件中包裹<router-view>，并设置过渡样式：

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

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

状态管理保存旧数据

使用Vuex或Pinia存储上一个页面的数据，在组件卸载前保存状态：

// Pinia示例
import { defineStore } from 'pinia'
export const usePageStore = defineStore('page', {
  state: () => ({
    previousPageData: null
  })
})

动态过渡效果

根据路由元信息动态切换过渡效果：

// router.js
routes: [
  {
    path: '/detail',
    component: Detail,
    meta: { transition: 'slide' }
  }
]

<template>
  <router-view v-slot="{ Component, route }">
    <transition :name="route.meta.transition || 'fade'">
      <component :is="Component" />
    </transition>
  </router-view>
</template>

页面加载状态处理

使用路由守卫处理数据加载状态：

router.beforeEach((to, from, next) => {
  store.commit('SET_LOADING', true)
  next()
})

router.afterEach(() => {
  setTimeout(() => {
    store.commit('SET_LOADING', false)
  }, 300)
})

组件间通信

通过事件总线或provide/inject在切换时传递数据：

// 事件总线
const emitter = mitt()
emitter.emit('page-change', { from: 'oldPage', data: {...} })

// provide/inject
provide('pageContext', { prevData: {...} })

生命周期控制

利用组件的activated和deactivated钩子：

<script>
export default {
  activated() {
    // 恢复页面状态
  },
  deactivated() {
    // 保存页面状态
  }
}
</script>

滚动行为控制

在路由配置中自定义滚动行为：

vue实现新旧页面切换

const router = createRouter({
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    } else {
      return { top: 0 }
    }
  }
})