Toteuta sovelluksesi reititysjärjestelmä tämän oppaan avulla.
SvelteKit on kehys kaikenkokoisten verkkosovellusten rakentamiseen, jolla on hyvä kehityskokemus ja joustava tiedostopohjainen reititys. Kehys yhdistää yksisivuisten sovellusten hakukoneoptimoinnin ja progressiivisen parannuksen edut palvelinpuolen hahmonnettujen sovellusten nopeaan navigointiin. Yksi SvelteKitin kriittisistä ominaisuuksista on sen reititysjärjestelmä.
SvelteKit-reitityksen ymmärtäminen
SvelteKit on kehys rakennettu Svelten päälle. SvelteKitissä reititys noudattaa tiedostopohjaista järjestelmää. Tämä tarkoittaa, että sivujesi hakemistorakenne määrittää sovelluksesi reitit.
Ymmärtääksesi SvelteKit-reititysjärjestelmää paremmin, luo ensin SvelteKit-projekti. Voit tehdä tämän suorittamalla seuraavan koodin päätteessäsi:
npm create svelte@latest my-app
Kun olet suorittanut yllä olevan koodilohkon, vastaat sarjaan kehotteita sovelluksesi määrittämiseksi.
Asenna seuraavaksi projektillesi tarvittavat riippuvuudet. Tehdä tämä CD projektiisi ja aja:
npm install
Avaa projekti kehityspalvelimella suorittamalla seuraava komento päätteessäsi:
npm run dev
Nyt projektisi on käynnissä ja käynnissä http://localhost: 5173/. Kun avaat sovelluksen kehityspalvelimellasi, sinulla on alla olevan kuvan kaltainen käyttöliittymä.
Hankkeen pääreitti ‘/’ vastaa tiedostoa nimeltä +sivu.hopea. Voit löytää +sivu.hopea tiedosto, joka seuraa tiedostopolkua; src/routes projektissasi.
Voit luoda erilaisia reittejä SvelteKitissä luomalla kansioita omaan src/routes hakemistosta. Jokainen kansio vastaa eri reittiä. Luo a +sivu.hopea tiedosto kussakin kansiossa määrittääksesi kyseisen reitin sisällön.
<main>
<h2> This is the about page h2>
main>
Yllä oleva koodi asuu sisällä +sivu tiedosto. Luot hoikan tiedoston sisään noin -kansiossa src/routes hakemistosta. Tämä tiedosto sisältää reitin sisällön. Jos haluat nähdä reitin verkkoselaimessasi, siirry kohtaan http://localhost: 5173/n.
Navigoiminen kohteeseen /about reitti näyttää tämän käyttöliittymän näytölläsi:
Sisäkkäisten reittien ymmärtäminen
Sisäkkäiset reitit ovat tapa jäsentää reititysjärjestelmää verkkosovelluksessa. Sisäkkäisessä reittirakenteessa reitit sijoitetaan muiden reittien sisään, jolloin niiden välille muodostuu hierarkkinen suhde. Voit luoda sisäkkäisiä reittejä SvelteKitissä sijoittamalla kansioita kohtaan +sivu.hopea tiedosto muiden reittikansioiden sisällä src/routes hakemistosta.
Esimerkiksi:
Tässä esimerkissä asetat sisään lähettää reitti sisällä blogi reitti. Pestääksesi lähettää reitti sisällä blogi reitti, luo lähettää kansio ja sen +sivu.hopea tiedosto sisällä blogi reittikansio.
Pääset blogireitille sovelluksessasi avaamalla verkkoselaimesi ja siirtymällä kohtaan http://localhost: 5173/blogi.
Postin reitti on saatavilla osoitteessa http://localhost: 5173/blogi/viesti.
Asettelut ja virhereitit
SvelteKit määrittelee a asettelu sovellukselle samalla tavalla kuin Next.js. Molemmat kehykset käyttävät a layout komponentti määrittää sovelluksen rakenteen.
SvelteKit käyttää +layout.homea määrittääksesi asettelun sivuryhmälle. Voit luoda a +layout.homea tiedosto tiedostoon src/routes hakemistossa voit määrittää asettelun kaikille sovelluksesi sivuille tai alihakemistoon tietylle sivuryhmälle asettelun määrittämiseksi.
Tässä on esimerkki asettelureitin määrittämisestä koko sovelluksellesi:
Yllä oleva esimerkki tarjoaa asettelureitin. Tiedosto sisältää a h1 elementti, joka näyttää tekstin "Tämä on SvelteKit-sovellus." Se sisältää myös a aukko elementti. The aukko elementti on erityinen elementti, joka määrittää sijainnin, jossa sovellus näyttää reittiesi sisällön asettelun sisällä. Se toimii samalla tavalla kuin Vue-komponentit.
Tässä tapauksessa sovelluksesi näyttää reittiesi sisällön alla h1 elementti.
Määritä virhesivu luomalla tiedosto nimeltä +error.svelte in src/routes hakemistosta. Tämä sivu tulee näkyviin, kun renderöinnin aikana tapahtuu virhe.
Esimerkiksi:
Kun kohtaat virheen, kuten navigoit olemattomalle reitille, sovelluksesi palaa tähän virhe reitti sen sijaan.
Esimerkiksi:
Reitti http://localhost: 5173/kerta ei ole olemassa, joten sovellus tekee virhe reitti sen sijaan.
Liikkuminen sivujen välillä
Parhaan tavan löytäminen luomiesi reittien välillä on erittäin tärkeää hyvän kokemuksen kannalta. Perinteisesti tiedostopohjainen reititys useimmissa teknologioissa käyttää linkkejä navigoidakseen eri sivujen välillä. Voit navigoida sivujen välillä SvelteKitissä käyttämällä yksinkertaista HTML-ankkuritunnistetta.
Voit esimerkiksi kirjoittaa tämän koodin haluamallesi reitille, mutta sinun tulee kirjoittaa se layout reitti yläpuolella aukko tag:
<ul>
<li>
<ahref="/">Homea>
li>
<li>
<ahref="/about">Abouta>
li>
<li>
<ahref="/blog">Bloga>
li>
<li>
<ahref="/blog/post">Posta>
li>
ul>
Napsauttamalla mitä tahansa ankkuritunnistetta, sinut ohjataan vastaavalle reitille.
Dynaaminen reititys SvelteKitissä
Dynaamisen reitityksen avulla voit asteittain luoda reittejä, jotka sovellus luo tietojen tai parametrien perusteella. Sen avulla voit luoda joustavia ja dynaamisia verkkosovelluksia, jotka käsittelevät erilaisia reittejä ja näyttävät sisältöä tiettyjen tietojen tai parametrien mukaan.
Luo dynaaminen reitti SvelteKitissä luomalla kansio nimeltä [etana] ja sitten a +sivu.hopea tiedosto kansioon määrittääksesi reitin sisällön. Huomaa, että voit nimetä kansion haluamallasi tavalla, mutta muista kirjoittaa nimi aina hakasulkeisiin [ ].
Tässä on esimerkki dynaamisesta reitistä:
Pääset tälle reitille selaimessasi navigoimalla tähän linkkiin http://localhost: 5173/[etana], missä [etana] voi olla mikä tahansa valitsemasi yksilöllinen määrittelemätön reitin nimi.
Voit käyttää sovelluksiasi [etana] parametria käyttämällä $page.params tiedot osoitteesta $sovellus/kaupat.
Esimerkiksi:
<scriptlang='ts'>
import { page } from '$app/stores'const params = $page.params;
script>
<main>
<h1>This is the {params.slug} pageh1>
main>
Tässä määrität $page.params vastustaa param muuttuja ja tee param.slug tiedot sovelluksessasi.
Sovellus hakee param.slug tiedot linkistäsi. Jos esimerkiksi navigoit kohteeseen http://localhost: 5173/palo, sovelluksessa näkyvä sisältö on "Tämä on palosivu."
Nyt tiedät reitityksen perusteet SvelteKitissä
SvelteKitin reititys on tehokas ominaisuus, jonka avulla voit jäsentää sovelluksesi järkevällä tavalla. Tämän ominaisuuden käytön ymmärtäminen auttaa sinua luomaan tehokkaampia ja käyttäjäystävällisempiä verkkosovelluksia. Luotpa sitten pienen henkilökohtaisen projektin tai laajan sovelluksen, SvelteKitin reititysjärjestelmässä on onnistumiseen tarvitsemasi työkalut.