使用Vue-Router转换Vue页面

Question

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

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

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

如果route-link的类别特殊，请执行另一个动画。

应用程序

<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>

我该如何工作？

如果用户单击具有特殊类别的路由器链接，请更改

<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 + googled，但没有找到任何可以帮助的东西。

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元字段的更多信息。