Vue中如何使用路由实现页面切换时的过渡效果？

npm install vue-router

import Vue from 'vue'import VueRouter from 'vue-router'import App from './App.vue'Vue.use(VueRouter)const router = new VueRouter({  routes: [    // 路由配置  ]})new Vue({  router,  render: h => h(App),}).$mount('#app')

import Vue from 'vue'import VueRouter from 'vue-router'import Home from '../views/Home.vue'import About from '../views/About.vue'Vue.use(VueRouter)const routes = [  {    path: '/',    name: 'Home',    component: Home  },  {    path: '/about',    name: 'About',    component: About  }]const router = new VueRouter({  mode: 'history',  base: process.env.BASE_URL,  routes})export default router

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

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

.fade-enter-active, .fade-leave-active {  transition: opacity 0.5s;}.fade-enter, .fade-leave-active {  opacity: 0;}

{  path: '/',  name: 'Home',  component: Home,  key: 'home'},{  path: '/about',  name: 'About',  component: About,  key: 'about'}