使用 Vue-Router 进行 Vue 页面转换

Question

我正在尝试使用 Vue 和 Vue-Router 进行漂亮的页面转换。

我直接在 router-view 中加载不同的页面（组件），它们的动画效果很好。

我已经为我的所有页面制作了很棒的动画，但是我需要弄清楚如何根据单击的路由器链接简单地更改过渡。

如果 route-link 的类很特殊，再做一个动画。

App.vue

<template>
  <div id="app">
    <nav>
      <router-link to="/1">Page 1</router-link>
      <router-link to="/2">Page 2</router-link>
      <router-link to="/3">Page 3</router-link>
      <router-link class="special" to="/4">Page 4</router-link>
    </nav>
    <transition @enter="enter" @leave="leave">
      <router-view/>
    </transition>
  </div>
</template>

<script>
  export default {
    ...
    methods: {
      enter(el, done) {
        // main page animation with a timeline using Greensock
      },
      leave(el, done) { 
        // main page animation with a timeline using Greensock
      }
    },
  }
</script>

如何让它工作？

如果用户点击带有特殊类的router-link，则更改

<transition @enter="enter" @leave="leave">
  <router-view/>
</transition>

收件人：

<transition @enter="enterSpecial" @leave="leaveSpecial">
  <router-view/>
</transition>

以便我添加

    methods: {
      enter(el, done) {
        // main page animation with a timeline using Greensock
      },
      leave(el, done) { 
        // main page animation with a timeline using Greensock
      }
    },

我已经通过 docs + google 搜索了，但没有找到任何可以帮助的东西。

Answer 1

您可以使用路由器元字段来了解您应该应用哪个动画。 在路由声明中，您可以为每个路由添加元字段。例如：

const router = new VueRouter({
  routes: [
    {
      path: '/default',
      component: SomeComponent
    },
    {
      path: '/special',
      component: SomeComponent2,
      // meta fields
      meta: { 
          animation: 'special'
      }
    }
  ]
})

然后在你的组件上，你可以这样做：

 methods: {
   enter(el, done) {
     if (this.$route.meta.animation === 'special') {
         // apply special animation
     } else {
        // main page animation with a timeline using Greensock
     }
   },
   leave(el, done) { 
     // main page animation with a timeline using Greensock
   }
 }

您可以找到有关 vue-router 元字段here 的更多信息。