I have a static homepage with some routes and thought about creating this with VueJs. I am totally new to this and just know NodeJs with Handlebars. So normally I would have something like this
#page {
margin: 30px 0;
}
<div id="header">
<a href="#">Page 1</a>
<a href="#">Page 2</a>
<a href="#">Page 3</a>
</div>
<div id="page">
Current Page (depends on URL)
</div>
<div id="footer">
Footer
</div>
And I tried to create this by using VueJs
const header = new Vue({
el: "#header",
methods: {
loadPage(pageToLoad) {
page.$data.currentPage = "Current Page: " + pageToLoad;
}
}
});
const page = new Vue({
el: "#page",
data: {
currentPage: "Current Page: 1"
}
});
#page {
margin: 30px 0;
}
<script src="https://unpkg.com/vue@2.5.17/dist/vue.js"></script>
<div id="header">
<a v-on:click="loadPage(1)">Page 1</a>
<a v-on:click="loadPage(2)">Page 2</a>
<a v-on:click="loadPage(3)">Page 3</a>
</div>
<div id="page">
<span v-html="currentPage"></span>
</div>
<div id="footer">
Footer
</div>
As you can see this example works fine. Instead of rendering the whole page I just change the "main content" of the page without reloading the header and footer.
Is this the correct way to go or how would you create a page with multiple routes?