简体   繁体   中英

How to navigate to child routes within a dynamic (slug) route in SvelteKit

I have the following route structure

src/routes/[slug]/results
src/routes/[slug]/about

I can't figure out how to link to the routes in SvelteKit. The routes themselves work when I access them through the browser navigation bar.

How can I create a simple links on the [slug] page, that will link to the child routes?

Both below link to the root:

<a href="results">results</a>
<a href="/results">results</a>

Tried something like below, but that didn't work.

<a href="/:slug/results">results</a> 
<a href="/[slug]/results">results</a> 

I assume it's something similar, but the SvelteKit documentation on routing and advanced routing don't mention anything related to navigation within dynamic routes.

Would just add the parameter to the link:

<script>
    import { page } from '$app/stores';
</script>

<a href="/{$page.params.slug}/results">Results</a>

I figured it out, it was a bit hidden in the documents (and I'm a starter, so not fully aware of all the concepts yet).

In +page.js:

/** @type {import('./$types').PageLoad} */
export function load({ params }) {
  return {
        slug: params.slug
  };
}

In +page.svelte:

<script>
    export let data;
</script>
<a href="/{data.slug}/result">results</a>
<a href="/{data.slug}/share">share</a>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM