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>
    ...