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，这样做是因为：如果把切换出去的组件保留在内存中，可以保留它的状态或避免重新渲染。
