[Vuejs]-VueJS Transition depending on whether a link is behind or before the current link in navbar

by

0👍

✅

You can add a metafield with a notion of ‘order’ to your routes.

const router = new VueRouter({
  routes: [
    {
      path: ...,
      component: ...,
      children: [
        {
          path: 'link1',
          component: linkOne,
          // a meta field
          meta: { order: 1 }
        },
        {
          path: 'link2',
          component: linkTwo,
          // a meta field
          meta: { order: 2 }
        },
        {
          path: 'link3',
          component: linkThree,
          // a meta field
          meta: { order: 3 }
        }
      ]
    }
  ]
})

You’ll have to use a variable/method for your transition name:

<transition :name="transitionName"></transition>

Then, based on the order of the current route and the target route you can determine which transition to apply and store in transitionName variable.
( You can access meta data with this.$route.meta)

Leave a comment