How to trigger a transition when a component is reused? - vue.js

Question

How to trigger a transition when transitioning between the same component?
(With vue-router 1, there was a canReuse hook. It doesn't exist anymore in vue-router 2.)
const Index = {
template: `<div id="app">
<router-link :to="{ path: '1' }">page 1</router-link> |
<router-link :to="{ path: '2' }">page 2</router-link>
<router-view></router-view>
</div>`
};
const Page = {
template: `<transition #enter="transitionEnter" #leave="transitionLeave">
<div>
<p>page {{ id }}</p>
</div>
</transition>`,
data() {
return {
id: this.$route.params.id,
}
},
methods: {
transitionEnter(el, done) {
console.log('transitionEnter');
done();
},
transitionLeave(el, done) {
console.log('transitionLeave');
done();
},
fetchData() {
this.id = this.$route.params.id;
}
},
watch: {
'$route': 'fetchData'
},
};
const App = Vue.extend(Index);
const router = new VueRouter({
routes: [{
path: '/:id',
component: Page
}, {
path: '*',
redirect: '/1'
}]
})
const app = new App({ router }).$mount('#app');
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="app"></div>

Answer 1

Use the key parameter on the router-view.
const Index = {
template: `<div id="app">
<p>app</p>
<router-link :to="{ path: '1' }">page 1</router-link> |
<router-link :to="{ path: '2' }">page 2</router-link>
<router-view :key="'a' + $route.params.id"></router-view>
</div>`
};
const Page = {
template: `<transition #enter="transitionEnter" #leave="transitionLeave">
<div>
<p>page {{ id }}</p>
</div>
</transition>`,
data() {
return {
id: this.$route.params.id,
}
},
methods: {
transitionEnter(el, done) {
console.log('transitionEnter');
done();
},
transitionLeave(el, done) {
console.log('transitionLeave');
done();
},
},
};
const App = Vue.extend(Index);
const router = new VueRouter({
routes: [{
path: '/:id',
component: Page
}, {
path: '*',
redirect: '/1'
}]
})
const app = new App({ router }).$mount('#app');
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="app"></div>