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

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:

    

        This is my chapter component. Page: {{parseInt($route.params.id)}}
    

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 :-)