面试题：Vue Router复杂路由切换动画中如何处理嵌套路由的过渡效果

Question

假设存在一个多层嵌套路由的Vue应用，在切换路由时，不仅要实现顶层路由的过渡动画，还要保证嵌套路由组件也有合理的过渡效果。请详细说明实现思路，并提供关键代码片段。

Answer 1

实现思路

1. 顶层路由过渡：在 App.vue 中，使用 <router-view> 包裹并添加过渡效果。Vue 提供了 <transition> 组件用于实现过渡动画。
2. 嵌套路由过渡：对于嵌套路由，同样在每个嵌套的 <router-view> 上添加过渡效果。确保每个嵌套路由组件都能正确触发过渡动画。

关键代码片段

1. App.vue

<template>
  <div id="app">
    <transition name="fade">
      <router-view></router-view>
    </transition>
  </div>
</template>

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

2. 嵌套路由组件的模板（假设嵌套路由组件为 Nested.vue）

<template>
  <div>
    <transition name="slide">
      <router-view></router-view>
    </transition>
  </div>
</template>

<style>
.slide-enter-active,
.slide-leave-active {
  transition: transform 0.5s;
}
.slide-enter {
  transform: translateX(-100%);
}
.slide-leave-to {
  transform: translateX(100%);
}
</style>

3. 路由配置（router/index.js）

import Vue from 'vue';
import Router from 'vue-router';
import Home from '@/components/Home';
import Nested from '@/components/Nested';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home,
      children: [
        {
          path: 'nested',
          name: 'Nested',
          component: Nested
        }
      ]
    }
  ]
});