Html代碼:
<div id="example">
<component v-bind:is="currentView" keep-alive></component> <!--組件保留在內(nèi)存-->
<button v-on:click = "currentchange">點(diǎn)擊切換</button>
<button v-on:click = "currentBack">點(diǎn)擊返回</button>
</div>
上述代碼是在官方文檔的小栗子基礎(chǔ)上改的，為的只是切換currentView的狀態(tài)块请；
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代碼實(shí)現(xiàn)了切換功能，觀察發(fā)現(xiàn)<component v-bind:is="currentView" keep-alive></component>中多了一個(gè)keep-alive拳缠，這樣做是因?yàn)椋喝绻亚袚Q出去的組件保留在內(nèi)存中墩新，可以保留它的狀態(tài)或避免重新渲染。
