I have an email application and I have a side menu with all the email boxes that will be available to the user. Here is the image:
What I want to do is:
Each time I select (click) an item from that menu it reloads only the content of the page, without reloading the page as a whole, ie change only what the user is viewing without reloading the entire page.
Is it possible ??
You can hide and show the blocks according to the place you are selecting or make a route system, in the case of Vue, use the #
A simple example of how to hide / show blocks can be as follows:
<div id="app">
<a href="#" v-on:click="deixarAtivo('div1')">Carros</a>
<a href="#" v-on:click="deixarAtivo('div2')">Marcas</a>
<div class="div1" v-show="estaAtiva('div1')">
Conteudo 1
</div>
<div class="div2" v-show="estaAtiva('div2')">
Conteudo 2
</div>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
mostrar: 'div1',
},
methods: {
deixarAtivo: function(val) {
this.mostrar = val;
},
estaAtiva: function(val) {
return this.mostrar === val;
},
}
});
</script>