Vue.js 2.0 transition on dynamic route not firing

Question

I found that transition is not firing on dynamic route with parameters. For exemple with the code below, when I am in /chapter/1 and I go to /chapter/2

Answer 1

Came here with the same problem and @Mani's answer works fine. But I don't really like the idea of using two <transition>s.

So I tried putting the key in <router-view> instead. And it works! Working example: https://codepen.io/widyakumara/details/owVYrW/

Not sure if this the proper vue-way of doing things, I'm kinda new using vue.

PS. I'm using Vue 2.4.1 & Vue Router 2.7.0

Answer 2

Can you check this working example: https://jsfiddle.net/mani04/dLnz4rbL/

I attempted to use the method described under Transitioning Between Elements in the docs.

In my fiddle example, which mostly uses the code from your question description, I used a transition wrapper within component, as shown below:

<transition name="fade" mode="out-in">
    <div class="page-contents" :key="$route.params.id">
        This is my chapter component. Page: {{parseInt($route.params.id)}}
    </div>
</transition>

The document specifies that we need to provide a key to make them distinct elements for Vue.js. So I added your chapter ID as key.

I don't know if this is a hack or a proper solution, I moved from Angular2 to Vue only 2 weeks ago. But till someone gives you a better solution, you may use this method to get your transitions for dynamic routes.

Regarding posting this as an issue in github page of vue-router, I am not sure if this qualifies to be addressed / fixed, but you may definitely bring it to their notice. Fix may involve not reusing components, which is also not ideal. So it is a tough call for them. But the discussion should definitely be interesting! Please post back the issue link here if you decide to create one :-)