Question

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

我直接在路由器视图中加载不同的页面（组件），这些页面都有很好的动画。

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

如果路线链接类是特殊的，请执行另一个动画。

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>

如何让它发挥作用？

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

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

我已经搜索了文档+ Google搜索，并且找不到任何有用的内容。

Answer 1

您可以使用路由器元素字段来了解应该应用的动画。在路径声明中，您可以为每个路径添加元字段。 E.g：

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

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

1 个答案: