``` js <!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.