Routing with hash-based routing

For the first example, we'll implement routing with svelte-spa-router (https://www.npmjs.com/package/svelte-spa-router), which uses hash-based routing.

You can find the final code for this section in the project's GitHub repository in the ch5 folder (for a direct link, go to https://bit.ly/sveltebook-ch5).

To start, install the module with the following command. We're saving it as a dependency and not a devDependency because it will be included in our application's bundle:

npm install --save svelte-spa-router@2

Defining the routes object

Using svelte-spa-router requires defining your routes in a dictionary (object) where the key is the path to match, which can optionally use parameters, and the value is a Svelte component object.

Create a file called src/routes.js that includes our routes dictionary:

src/routes.js

import ViewAdd from './components/ViewAdd.svelte'
import ViewObject from './components...