Single Page Applications Chapter 15This is not true when you are in an SPA, or at least is not automatic. The vue-router history
mode lets you simulate this or, even better, have fine-grained control of what happens to
your scrolling.
Getting ready
To complete this recipe, we will need to switch to history mode. History mode only works
when the app is running on a properly configured server. How to configure a server for
SPA is out of the scope of this book (but the principle is that every route gets redirected
from the server side to index.html).
We will use an npm program to launch a small server; you are expected to have
npm installed.
How to do it...
First, you'll install a compact server for SPAs so that history mode will work.
In your favorite command line, go inside the directory that will contain your application.
Then, type the following commands:
npm install -g history-server
history-server.After the server is run, you will have to point your browser to http://localhost:8080
and if you have a file called index.html in your directory, it will be shown; otherwise, you
won't see much.
Create a file called index.html and fill in some boilerplate, like in the Choosing a
development environment recipe. We want an empty page with only Vue and vue-router as
dependencies. Our empty canvas should look like this:
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
</div>
<script>
new Vue({