Implementeer het routeringssysteem voor uw toepassing met behulp van deze handleiding.

SvelteKit is een raamwerk voor het bouwen van webapplicaties van elke omvang, met geweldige ontwikkelingservaring en flexibele op bestanden gebaseerde routering. Het framework combineert de voordelen van SEO van apps met één pagina en progressieve verbetering met de snelle navigatie van applicaties die aan de serverzijde worden weergegeven. Een van de kritieke kenmerken van SvelteKit is het routeringssysteem.

SvelteKit-routering begrijpen

SvelteKit is een raamwerk gebouwd op de top van Svelte. In SvelteKit volgt de routering een op bestanden gebaseerd systeem. Dit betekent dat de directorystructuur van uw pagina's de routes van uw toepassing bepaalt.

Maak eerst een SvelteKit-project om het SvelteKit-routeringssysteem beter te begrijpen. Voer hiervoor de volgende code uit in uw terminal:

npm create svelte@latest my-app

Nadat u het bovenstaande codeblok hebt uitgevoerd, beantwoordt u een reeks prompts om uw toepassing te configureren.

instagram viewer

Installeer vervolgens de benodigde afhankelijkheden voor uw project. Om dit te doen CD in uw project en voer uit:

npm install

Open het project op de ontwikkelingsserver door de volgende opdracht in uw terminal uit te voeren:

npm run dev

Nu zal uw project actief zijn http://localhost: 5173/. Wanneer u de toepassing op uw ontwikkelingsserver opent, heeft u een interface die lijkt op de onderstaande afbeelding.

De hoofdroute van het project ‘/’ komt overeen met een bestand met de naam +pagina.slank. U kunt de +pagina.slank bestand dat het bestandspad volgt; src/routes bij uw project.

Om verschillende routes in SvelteKit te maken, kunt u mappen maken in uw src/routes map. Elke map komt overeen met een andere route. Genereer een +pagina.slank bestand in elke map om de inhoud van die route te definiëren.


<main>
<h2> This is the about page h2>
main>

De bovenstaande code zal in de +pagina bestand. U maakt een slank bestand in de over map in de src/routes map. Dit bestand bevat de inhoud van de route. Navigeer naar om de route in uw webbrowser te bekijken http://localhost: 5173/ongeveer.

Navigeren naar de /about route zal deze interface op uw scherm weergeven:

Geneste routes begrijpen

Geneste routes zijn een manier om het routeringssysteem in een webapplicatie te structureren. In een geneste routestructuur worden routes binnen andere routes geplaatst, waardoor er een hiërarchische relatie tussen deze routes ontstaat. U kunt geneste routes maken in SvelteKit door mappen te plaatsen met de +pagina.slank bestand in andere routemappen onder de src/routes map.

Bijvoorbeeld:

In dit voorbeeld nest je de na traject binnen de bloggen route. Om de te nesten na traject binnen de bloggen route, maak de na map en zijn +pagina.slank bestand in de bloggen route map.

Om toegang te krijgen tot de blogroute in uw toepassing, opent u uw webbrowser en navigeert u naar http://localhost: 5173/blog.

De postroute is beschikbaar op http://localhost: 5173/blog/bericht.

Lay-outs en foutroutes

SvelteKit definieert een lay-out voor de toepassing op een vergelijkbare manier als Next.js. Beide kaders gebruiken een indeling component om de structuur van de applicatie te definiëren.

SvelteKit gebruikt de +indeling.slank om een ​​lay-out voor een groep pagina's te definiëren. U kunt een +indeling.slank bestand in de src/routes directory om een ​​lay-out voor alle pagina's in uw toepassing te definiëren of in een subdirectory om een ​​lay-out voor een specifieke groep pagina's te definiëren.

Hier is een voorbeeld van hoe u een lay-outroute voor uw gehele toepassing kunt definiëren:

Bovenstaand voorbeeld geeft een uitzetroute. Het bestand bevat een h1 element dat de tekst weergeeft "Dit is een SvelteKit-toepassing." Het omvat ook een sleuf element. De sleuf element is een speciaal element dat de locatie definieert waar de applicatie de inhoud van uw routes binnen de lay-out zal weergeven. Het werkt op dezelfde manier als Vue-componenten.

In dit geval zal uw toepassing de inhoud van uw routes onder de h1 element.

Om een ​​foutpagina te definiëren, maakt u een bestand met de naam +fout.slank in de src/routes map. Deze pagina wordt weergegeven wanneer er een fout optreedt tijdens het renderen.

Bijvoorbeeld:

Wanneer je een fout tegenkomt, zoals het navigeren naar een niet-bestaande route, zal je applicatie hierop terugvallen fout route in plaats daarvan.

Bijvoorbeeld:

De route http://localhost: 5173/go bestaat niet, dus de toepassing geeft de fout route in plaats daarvan.

Navigeren tussen pagina's

Het vinden van de beste manier om te navigeren tussen de routes die je maakt, is cruciaal voor een goede ervaring. Traditioneel gebruikt bestandsgebaseerde routering in de meeste technologieën koppelingen om tussen verschillende pagina's te navigeren. Om tussen pagina's in SvelteKit te navigeren, kunt u een eenvoudige HTML-ankertag gebruiken.

U kunt deze code bijvoorbeeld in elke gewenste route schrijven, maar u moet deze in de indeling traject boven de sleuf label:

<ul>
<li>
<ahref="/">Homea>
li>
<li>
<ahref="/about">Abouta>
li>
<li>
<ahref="/blog">Bloga>
li>
<li>
<ahref="/blog/post">Posta>
li>
ul>

Als u op een ankertag klikt, navigeert u naar de bijbehorende route.

Dynamische routering in SvelteKit

Met dynamische routering kunt u geleidelijk routes maken die de toepassing genereert op basis van gegevens of parameters. Hiermee kunt u flexibele en dynamische webapplicaties maken die verschillende routes afhandelen en inhoud weergeven op basis van specifieke gegevens of parameters.

Om een ​​dynamische route in SvelteKit te maken, maakt u een map met de naam [naaktslak] en dan een +pagina.slank bestand in de map om de inhoud van de route te definiëren. Merk op dat u de map elke gewenste naam kunt geven, maar zorg ervoor dat u de naam altijd tussen haakjes plaatst [ ].

Hier is een voorbeeld van een dynamische route:

Om toegang te krijgen tot deze route in uw webbrowser, navigeert u naar deze link http://localhost: 5173/[slak], waar [naaktslak] kan elke unieke ongedefinieerde routenaam zijn die u kiest.

U heeft toegang tot uw applicatie [naaktslak] parameter met behulp van de $pagina.params data van $app/winkels.

Bijvoorbeeld:

<scriptlang='ts'>
 import { page } from '$app/stores'
 const params = $page.params;
script>
<main>
<h1>This is the {params.slug} pageh1>
main>

Hier wijs je de $pagina.params bezwaar maken tegen de param variabele en geef de param.slak gegevens in uw aanvraag.

De applicatie haalt de param.slak gegevens van uw koppeling. Als u bijvoorbeeld navigeert naar http://localhost: 5173/vuur, zal de inhoud die in de applicatie wordt weergegeven, zijn "Dit is de brandpagina."

Nu kent u de basisprincipes van routering in SvelteKit

Routing in SvelteKit is een krachtige functie waarmee u uw toepassing op een logische manier kunt structureren. Als u begrijpt hoe u deze functie gebruikt, kunt u efficiëntere en gebruiksvriendelijkere webapplicaties maken. Of u nu een klein persoonlijk project maakt of een grootschalige applicatie, het routeringssysteem van SvelteKit heeft de tools die u nodig hebt om te slagen.