使用Vue-Router转换Vue页面

Question

I'm trying to make nice page transitions using Vue and Vue-Router.

I load different pages (components) directly in the router-view , these have a nice animation.

I've already got a great animation for all my pages, however I need to figure out how to simply change the transition based on the router-link that is clicked.

If class of route-link is special, do another animation.

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>

How do I get this to work?

If the user clicks on router-link with a class of special, change

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

to:

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

so that I can add

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

I've searched through the docs + googled, and haven't found anything that could help.

Answer 1

You can use Router Meta Fields to know which animation you should apply. On routes declaration, you can add meta fields for each route. Eg:

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

Then on your components, you can do this:

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

You can find more information about vue-router meta fields here .