Creating an SPA with vue-router
Vue.js implements the SPA pattern through its core plugin, vue-router. To vue-router, every route URL corresponds to a component. This means that we will tell vue-router how to behave when the user goes to a particular URL in terms of its component. In other words, every component in this new system is a page in the old system.
Getting ready
For this recipe, you will only need to install vue-router and have some knowledge about Vue components.
To install vue-router, follow the instructions at https://router.vuejs.org/en/installation.html.
If you are using JSFiddle to follow along, you can add a link similar to https://unpkg.com/vue-router/dist/vue-router.js.
How to do it…
We are preparing a modern website for a restaurant and we will use the SPA pattern.
The website will consist of three pages: a home page, the restaurant menu, and the bar menu.
The whole HTML code will be like this:
<div id="app"> <h1>Choppy's Restaurant</h1> <ul> ...