Single Page Applications Chapter 15URLs don't point to HTML pages anymore, but to particular states of your application (that
most often look like different pages). In practice, on a server, assuming that your
application is inside the index.html page, this is implemented by redirecting the user that
is requesting ,say, about me to index.html.
The latter page will take the suffix of the URL and will interpret it as a route, which in turn
will create a page-like component with biographical information.
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>
<li>Home</li>
<li>Menu</li>