面试题：Vue中如何使用Vue Router实现简单的路由切换过渡效果

Question

请描述在Vue项目中，利用Vue Router实现页面路由切换时，添加简单过渡动画（如淡入淡出）的基本步骤，并给出相应的代码示例。

Answer 1

1. 基本步骤：
   • 第一步：在Vue项目中安装并引入vue - router。如果是Vue CLI创建的项目，一般已经默认安装。
   • 第二步：定义路由动画的CSS样式。对于淡入淡出效果，主要是利用opacity属性。
   • 第三步：在Vue组件中使用<transition>组件包裹路由出口<router - view>。
2. 代码示例：
   • CSS部分：

/* 定义淡入淡出动画的CSS */
.fade - enter - active,
.fade - leave - active {
  transition: opacity 0.5s;
}
.fade - enter,
.fade - leave - to {
  opacity: 0;
}

• Vue组件部分：

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

<script>
export default {
  name: 'App'
}
</script>

• 路由配置（假设在router/index.js中）：

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

Vue.use(Router);

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