I've encountered an issue where transitions are not firing on dynamic routes with parameters. For example, when navigating from /chapter/1 to /chapter/2, no transition occurs. However, when going from /chapter/1 to /profile/1, a transition does occur!
Here is the snippet from the main.js file:
require('normalize.css')
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App'
import Panel from './components/Panel'
import Profile from './components/Profile'
window.bus = new Vue()
Vue.use(VueRouter)
const router = new VueRouter({
routes: [
{ path: '/', redirect: '/chapter/1' },
{ name:'chapter', path: '/chapter/:id', component: Panel},
{ name:'profile', path: '/profile/:id', component: Profile}
]
})
new Vue({
router,
el: '#app',
render: h => h(App)
})
And here is the template code from App.vue:
<template>
<div id="app">
<transition name="fade" mode="out-in">
<router-view></router-view>
</transition>
<div class="controls">
<router-link :to="{ name: 'chapter', params: { id: Math.max(1, parseInt($route.params.id) - 1) }}">
Prev
</router-link>
<router-link :to="{ name: 'chapter', params: { id: parseInt($route.params.id) + 1 }}">
Next
</router-link>
</div>
</div>
</template>
I suspect that vue-router may not be destroying the parent component, causing the transition issue. I tried this configuration on the vue-router examples pack and experienced the same behavior.
Referencing the documentation, it states:
One thing to note when using routes with params is that when the user navigates from /user/foo to /user/bar, the same component instance will be reused. Since both routes render the same component, this is more efficient than destroying the old instance and then creating a new one. However, this also means that the lifecycle hooks of the component will not be called.
To react to params changes in the same component, you can simply watch the $route object
Do you think I should raise this as an issue?
Thank you for your assistance!