vue dynamic component keep-alive

1070107

by Jubels

HTML

<div id="app">
    <ul class="navbar">
       <li><a href="#" @click="changeTab('home')">Home</a></li>
       <li><a href="#" @click="changeTab('about')">About</a></li>
       <li><a href="#" @click="changeTab('contact')">Contact</a></li>
    </ul>
    <hr>
    <component :is="currentView"></component>
    <keep-alive>
        <component :is="currentView"></component>
    </keep-alive>
</div>

JavaScript

Vue.component ('home', {
    template: `<div>This is Home page.
                    <p><input type="text" placeholder="Type your name here..."></p>
                </div>`
})

Vue.component ('about', {
    template: '<div>This is About page.</div>',
    activated: function(v) {
    	alert("test")
    }
})

Vue.component ('contact', {
    template: '<div>This is Contact page.</div>'
})

new Vue ({
    el: '#app',
    data: {
        currentView: 'home'
    },
    methods: {
        changeTab: function(v) {
            this.currentView = v
        }
    }
})