Html代碼:
<div id="example">
    <component v-bind:is="currentView" keep-alive></component>  <!--組件保留在內存-->
    <button v-on:click = "currentchange">點擊切換</button>
    <button v-on:click = "currentBack">點擊返回</button>
</div>

上述代碼是在官方文檔的小栗子基礎上改的，為的只是切換currentView的狀態；

JavaScript代碼:
var Home = {
    template: '<input type = "text">'
}
var Main = {
    template: "<p>Welcome Index!</p>"
}
var vm = new Vue({
    el: '#example',
    data: {
        currentView: 'home'
    },
    components: {
        home: Home,
        main: Main
    },
    methods: {
        currentchange: function() {
            vm.currentView = 'main'
        },
        currentBack: function() {
            vm.currentView = 'home'
        }
    }
})

上面的js代碼實現了切換功能，觀察發現<component v-bind:is="currentView" keep-alive></component>中多了一個keep-alive，這樣做是因為：如果把切換出去的組件保留在內存中，可以保留它的狀態或避免重新渲染。