如何在Vue应用程序中使用Vue-Router来实现路由嵌套动画效果？

npm install vue-router

yarn add vue-router

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
import Home from './views/Home.vue'
import About from './views/About.vue'

Vue.use(VueRouter)

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]

const router = new VueRouter({
  mode: 'history',
  routes
})

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

<!--App.vue-->
<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<!--Home.vue-->
<template>
  <div class="home">
    <h1>Welcome to Home</h1>
  </div>
</template>

<script>
export default {
  beforeRouteEnter(to, from, next) {
    next(vm => {
      // 进入页面的动画
      gsap.from(vm.$el, { opacity: 0, duration: 1 })
    })
  },
  beforeRouteLeave(to, from, next) {
    // 离开页面的动画
    gsap.to(this.$el, { opacity: 0, duration: 1, onComplete: next })
  }
}
</script>

<style>
.home {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
</style>