This tutorials shows how to add routing to svelte application.

There are multiple ways we can add routing

  • Sapphire:
  • Svelte-routing:

Create svelte application

Type the following command to create an svelte applicaiton.

A:\work\w3schools\svelte>npx degit sveltejs/template svelte-routing-example
Need to install the following packages:
  degit
Ok to proceed? (y) y
> cloned sveltejs/template#HEAD to svelte-routing-example
>

Once created an application, Change to application folder with below command

A:\work\w3schools\svelte>cd svelte-routing-example

Start the application using npm run start

A:\work\w3schools\svelte\svelte-routing-example>npm run start

> [email protected] start
> sirv public --no-clear


  Your application is ready~! 🚀

  - Local:      http://localhost:5000
  - Network:    Add `--host` to expose

────────────────── LOGS ──────────────────

Application is starte at port 5000 and accessible at http://localhost:5000.\

You can check here for more understanding folder strucutre and hello world applicaiton example.

Create a Components

In Application, Go to src folder, Create a two components

  • home.svelte
  • contact.svelte

home.svelte

contact.svelte