Vue.$router.push with same route but different parameters - how to trigger transition?

Viewed 1809

My application uses this.$router.push to change state. The first route is /page/1, the next /page/2 and so on. My problem is, that since Vue doesn't reload the component, the transition effect is not triggered. How can I fix this? I don't mind if the whole component needs to be recreated.

Since there is no parent component I didn't find a way to use :key.

App.vue:

<collapse-transition origin="center" mode="out-in" :duration="250">
  <router-view/>
</collapse-transition>

router.ts:

{
  path: '/page/:case',
  name: 'Page',
  component: Page,
},            

Page component:

this.$router.push("/page/" + case + 1)
1 Answers

Finally I made it:

    <collapse-transition origin="center" mode="out-in" :duration="250">
        <router-view :key="$route.fullPath"/>
    </collapse-transition>
Related