<div id="app">
<ul class="nav">
<li class="nav-item" @click="changeView('home')">
<a class="nav-link">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" @click="changeView('shop')">Shop</a>
</li>
<li class="nav-item">
<a class="nav-link" @click="changeView('contact')">Contact</a>
</li>
</ul>
<keep-alive>
<component :is="view"></component>
</keep-alive>
</div>
Vue.component("home", {
template: `<div>home: {{count}}</div>`,
activated(){
this.count ++;
},
data(){
return{
count: 0
}
}
})
Vue.component("shop", {
template: `<div @click='countOn()'>shop: {{count}}</div>`,
data(){
return{
count: 0
}
},
methods:{
countOn(){
this.count++;
}
}
})
Vue.component("contact", {
template: `<div>contact</div>`
})
let app=new Vue({
el: "#app",
data: {
view: "home"
},
methods: {
changeView: function(tab){
this.view=tab;
}
}
})
