Navigation

You can navigate between pages with normal anchor (<a>) tags. For example:

<a href="#/book/123">Thus Spoke Zarathustra</a>

The use:link action#

Rather than having to type # before each link, you can also use the use:link action:

<script>
import {link} from 'svelte-spa-router'
</script>
<a href="/book/321" use:link>The Little Prince</a>

The use:link action accepts an optional parameter opts, which can be one of:

• A dictionary {href: '/foo', disabled: false} where both keys are optional:
  • If you set a value for href, your link will be updated to point to that address, reactively (this will always take precedence over href attributes, if present)
  • Setting disabled: true disables the link, so clicking on that would have no effect
• A string with a destination (e.g. /foo), which is a shorthand to setting {href: '/foo'}.

For example:

<script>
import {link} from 'svelte-spa-router'
let myLink = "/book/456"
</script>
<!-- Note the {{...}} notation because we're passing an object
as parameter for a Svelte action -->
<a use:link={{href: myLink, disabled: false}}>
  The Biggest Princess
</a>

The above is equivalent to:

<script>
import {link} from 'svelte-spa-router'
let myLink = "/book/456"
</script>
<a use:link={myLink}>The Biggest Princess</a>

Changing the value of myLink will reactively update the link’s href attribute.

Navigating programmatically#

You can navigate between pages programmatically too:

import {push, pop, replace} from 'svelte-spa-router'

// The push(url) method navigates to another page,
// just like clicking on a link.
push('/book/42')

// The pop() method is equivalent to hitting the back
// button in the browser.
pop()

// The replace(url) method navigates to a new page, but
// without adding a new entry in the browser's history stack.
// So, clicking on the back button in the browser would not
// lead to the page users were visiting before
// the call to replace().
replace('/book/3')

These methods can be used inside Svelte markup too, for example:

<button onclick={() => push('/page')}>Go somewhere</button>

The push, pop and replace methods perform navigation actions only in the next iteration (“tick”) of the JavaScript event loop. This makes it safe to use them also inside onMount callbacks within Svelte components.

These functions return a Promise that resolves with no value once the navigation has been triggered (in the next tick of the event loop); however, please note that this will likely be before the new page has rendered.