vue-router 2.7 beforeRouteUpdate bug
HTML
<script src="https://npmcdn.com/vue/dist/vue.js"></script>
<script src="https://npmcdn.com/vue-router/dist/vue-router.js"></script>
<div id="app">
<transition name="slide-fade"><router-view :key="$route.fullPath"></router-view></transition>
<p><router-link to="/app/second">Add One</router-link></p>
<p><router-link to="/app/third">And Another</router-link></p>
<p><router-link to="/app/four">And One More</router-link></p>
</div>
<template id="home-component">
<p>Value: {{x}}</p>
</template>
CSS
.slide-fade-enter-active, .slide-fade-leave-active {
transition: all .6s ease;
}
.slide-fade-leave-active {
position: absolute;
top: 0;
}
.slide-fade-enter {
transform: translateX(40px);
opacity: 0;
}
.slide-fade-leave-to {
transform: translateX(-40px);
opacity: 0;
}
Babel + JSX
var updateData = function(from, to, next) {
console.log('Gets here for both.');
this.x = 500;
/* next(function(vm) {
console.log('Only gets here on enter, never update.');
vm.x = vm.x + 1;
}); */
};
const Home = {
template: '#home-component',
data: function() {return {x: 0};},
beforeRouteEnter: updateData,
beforeRouteUpdate: updateData
}
const router = new VueRouter({
mode: 'history',
routes: [{
"path": "/app/:id",
"name": "app",
"component": Home
}]
})
new Vue({router, el: '#app'});