Navigation

Links

Similar to SvelteKit, standard anchor tags provide basic navigation between pages:

<a href="/about">About</a>

To leverage type-safe navigation, use the p function, which provides auto-complete and type checking for your routes.

Code-based

<script lang="ts">
	import { p } from '../router';
</script>

<a href={p('/about')}>About</a>

File-based

<script lang="ts">
	import { p } from 'sv-router/generated';
</script>

<a href={p('/about')}>About</a>

You can also pass parameters and additional options:

<a
  href={p('/post/:slug', { slug: '123' })}
  data-replace
  data-state="{ from: 'home' }"
>
  A post
</a>

Programmatic Navigation

For navigation triggered by JavaScript events, use the navigate function, which also provides auto-complete and type checking for your routes:

Code-based

<script lang="ts">
	import { navigate } from '../router';
</script>

<button onclick={() => navigate('/about')}>About</button>

File-based

<script lang="ts">
	import { navigate } from 'sv-router/generated';
</script>

<button onclick={() => navigate('/about')}>About</button>

Similarly, you can pass parameters and additional options:

navigate('/post/:slug', {
	params: {
		slug: '123',
	},
	replace: true,
	search: '?q=hello',
	state: '{ from: "home" }',
	hash: 'first-section',
});

The navigate function also supports traversing through browser history, similar to the native History API:

// Go back one page (equivalent to the browser's back button)
navigate(-1);

// Go forward one page (equivalent to the browser's forward button)
navigate(1);

// Go back two pages
navigate(-2);