<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>
<component :is="view"></component>
</div>
Vue.component("home", {
template: `<div>home</div>`
})
Vue.component("shop", {
template: `<div>shop</div>`
})
Vue.component("contact", {
template: `<div>contact</div>`
})
let app=new Vue({
el: "#app",
data: {
view: "home"
},
methods: {
changeView: function(tab){
this.view=tab;
}
}
})
