<!DOCTYPE html>
<html>
<head>
<style>
.v-enter, .v-leave {
transition: 0.3s;
}
</style>
</head>
<body>
<script src="node_modules/vue/dist/vue.js"></script>
<component is="{{currentView}}"></component>
<script>
Vue.component('home', {
template: '<div class="home" v-transition style="display: none"></div><div><a href="javascript:" v-on="click: $parent.currentView = \'page1\'">go to page1</a></div>'
});
Vue.component('page1', {
template: '<div class="page1" v-transition style="display: none"></div><div><a href="javascript:" v-on="click: $parent.currentView = \'home\'">go to home</a></div>'
});
var app = new Vue({
el: 'html',
data: {
currentView: 'home'
}
});
</script>
</body>
</html>
Switch between home and page1 several times, there will be many div.home and div.page1 left in the DOM tree.