Vue.js如何仅在指定视图应用过渡，并为不同页面配置不同过渡？

一、仅在/welcome开头的视图间启用过渡 #

通过监听路由变化记录上一个路径，判断当前和上一个路由是否均以/welcome开头，仅满足条件时触发过渡效果。

修改后的App.vue代码 #

<template>
  <div class="container mb-auto">
    <router-view v-slot="{ Component, route }">
      <!-- 动态控制过渡是否生效 -->
      <transition 
        :name="shouldApplyTransition ? 'slide' : ''" 
        mode="out-in"
      >
        <component :is="Component" :key="route.path"></component>
      </transition>
    </router-view>
  </div>

  <TheFooter v-if="withMenu" />
</template>

<script setup>
import { useRoute, watch, computed } from 'vue'
import TheFooter from './components/TheFooter.vue'

const route = useRoute()
let prevRoutePath = ''

// 监听路由切换，保存上一个页面的路径
watch(route, (newRoute, oldRoute) => {
  prevRoutePath = oldRoute.path || ''
}, { immediate: true })

// 判断是否满足过渡条件：前后页面均为/welcome开头
const shouldApplyTransition = computed(() => {
  return route.path.startsWith('/welcome') && prevRoutePath.startsWith('/welcome')
})

// 替换为你实际的withMenu逻辑
const withMenu = true
</script>

<style>
/* 你的slide过渡样式 */
.slide-enter-active,
.slide-leave-active {
  transition: transform 0.3s ease;
}
.slide-enter-from {
  transform: translateX(100%);
}
.slide-leave-to {
  transform: translateX(-100%);
}
</style>

二、为不同页面配置不同过渡效果 #

利用路由元信息（meta）为每个页面指定专属过渡名称，再在App.vue中动态绑定过渡组件的name属性。

步骤1：在路由配置中添加过渡元信息 #

修改路由配置文件（如router/index.js）：

import { createRouter, createWebHistory } from 'vue-router'
import WelcomeStep1 from '../views/WelcomeStep1.vue'
import WelcomeStep2 from '../views/WelcomeStep2.vue'
import Home from '../views/Home.vue'
import About from '../views/About.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    meta: { transitionName: 'fade' } // 首页使用fade过渡
  },
  {
    path: '/welcome/step1',
    name: 'WelcomeStep1',
    component: WelcomeStep1,
    meta: { transitionName: 'slide' } // 欢迎页1使用slide过渡
  },
  {
    path: '/welcome/step2',
    name: 'WelcomeStep2',
    component: WelcomeStep2,
    meta: { transitionName: 'scale' } // 欢迎页2使用scale过渡
  },
  {
    path: '/about',
    name: 'About',
    component: About,
    meta: { transitionName: 'slide-up' } // 关于页使用slide-up过渡
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

步骤2：在App.vue中动态绑定过渡名称 #

结合第一个需求，仅在/welcome视图间应用自定义过渡：

<template>
  <div class="container mb-auto">
    <router-view v-slot="{ Component, route }">
      <transition 
        :name="shouldApplyTransition ? (route.meta.transitionName || 'slide') : ''" 
        mode="out-in"
      >
        <component :is="Component" :key="route.path"></component>
      </transition>
    </router-view>
  </div>

  <TheFooter v-if="withMenu" />
</template>

<script setup>
import { useRoute, watch, computed } from 'vue'
import TheFooter from './components/TheFooter.vue'

const route = useRoute()
let prevRoutePath = ''

watch(route, (newRoute, oldRoute) => {
  prevRoutePath = oldRoute.path || ''
}, { immediate: true })

const shouldApplyTransition = computed(() => {
  return route.path.startsWith('/welcome') && prevRoutePath.startsWith('/welcome')
})

const withMenu = true
</script>

<style>
/* 定义所有过渡样式 */
/* slide过渡 */
.slide-enter-active,
.slide-leave-active {
  transition: transform 0.3s ease;
}
.slide-enter-from {
  transform: translateX(100%);
}
.slide-leave-to {
  transform: translateX(-100%);
}

/* scale过渡 */
.scale-enter-active,
.scale-leave-active {
  transition: transform 0.3s ease;
}
.scale-enter-from {
  transform: scale(0.8);
  opacity: 0;
}
.scale-leave-to {
  transform: scale(1.2);
  opacity: 0;
}

/* fade过渡 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

/* slide-up过渡 */
.slide-up-enter-active,
.slide-up-leave-active {
  transition: transform 0.3s ease;
}
.slide-up-enter-from {
  transform: translateY(100%);
}
.slide-up-leave-to {
  transform: translateY(-100%);
}
</style>

说明 #

• 如果不需要限定/welcome路由，直接去掉shouldApplyTransition的判断，直接绑定name="route.meta.transitionName || 'slide'"即可。
• 未指定meta.transitionName的路由会使用默认的slide过渡（可根据需求修改默认值）。

内容的提问来源于stack exchange，提问作者thiebo