vue.js multiple transitions for a router-view

Question

If I have a vue-router 'router-view' element defined like this:

<router-view transition="slide">

Is there a way to change the transition to a 'fade' when a specific route is called?

Answer 1

Use a dynamic binding fopr transition:

<router-view :transition="$route.transition">

And set the data of transition from your route data

router.map({
  '/specialroute': {
    component: { ... },
    transition: 'fade'
  }
})