15

Single Page Applications

In this chapter, the following recipes will be covered:

Creating an SPA with vue-router

Fetching data before switching route

Using named dynamic routes

Having more than one router-view in your page

Composing your routes hierarchically

Using route aliases

Adding transitions between your routes

Managing errors for your routes

Adding a progress bar to load pages

How to redirect to another route

Saving scrolling position when hitting back

Introduction

Many modern applications are based on the SPA or Single Page Application model. From

the users perspective, this means that the whole website looks similar to an application in a
single page.

This is good because, if done correctly, it enhances the user experience, mainly reducing
waiting times, because there are no new pages to load--the whole website is on a single

page. This is how Facebook, Medium, Google, and many other websites work.