Ένας οδηγός για τη δρομολόγηση στο SvelteKit

Το SvelteKit είναι ένα πλαίσιο για τη δημιουργία διαδικτυακών εφαρμογών όλων των μεγεθών, με μεγάλη εμπειρία ανάπτυξης και ευέλικτη δρομολόγηση βάσει αρχείων. Το πλαίσιο συνδυάζει τα οφέλη SEO και προοδευτικής βελτίωσης των εφαρμογών μιας σελίδας με τη γρήγορη πλοήγηση σε εφαρμογές που έχουν αποδοθεί από τον διακομιστή. Ένα από τα κρίσιμα χαρακτηριστικά του SvelteKit είναι το σύστημα δρομολόγησης του.

Κατανόηση της δρομολόγησης SvelteKit

Το SvelteKit είναι ένα πλαίσιο χτισμένο στην κορυφή του Svelte. Στο SvelteKit, η δρομολόγηση ακολουθεί ένα σύστημα που βασίζεται σε αρχεία. Αυτό σημαίνει ότι η δομή του καταλόγου των σελίδων σας καθορίζει τις διαδρομές της εφαρμογής σας.

Για να κατανοήσετε καλύτερα το σύστημα δρομολόγησης SvelteKit, πρώτα δημιουργήστε ένα έργο SvelteKit. Για να το κάνετε αυτό, εκτελέστε τον ακόλουθο κώδικα στο τερματικό σας:

npm create svelte@latest my-app

Αφού εκτελέσετε το μπλοκ κώδικα παραπάνω, θα απαντήσετε σε μια σειρά προτροπών για να διαμορφώσετε την εφαρμογή σας.

Στη συνέχεια, εγκαταστήστε τις απαραίτητες εξαρτήσεις για το έργο σας. Για να γινει αυτο CD στο έργο σας και εκτελέστε:

npm install

Ανοίξτε το έργο στον διακομιστή ανάπτυξης εκτελώντας την ακόλουθη εντολή στο τερματικό σας:

npm run dev

Τώρα, το έργο σας θα είναι σε λειτουργία http://localhost: 5173/. Όταν ανοίγετε την εφαρμογή στον διακομιστή ανάπτυξης, θα έχετε μια διεπαφή παρόμοια με την παρακάτω εικόνα.

Η βασική διαδρομή του έργου ‘/’ αντιστοιχεί σε ένα αρχείο με όνομα +σελίδα.σβέλτος. Μπορείτε να βρείτε το +σελίδα.σβέλτος αρχείο ακολουθώντας τη διαδρομή του αρχείου. src/διαδρομές στο έργο σας.

Για να δημιουργήσετε διαφορετικές διαδρομές στο SvelteKit, μπορείτε να δημιουργήσετε φακέλους στο δικό σας src/διαδρομές Ευρετήριο. Κάθε φάκελος θα αντιστοιχεί σε διαφορετική διαδρομή. Δημιουργία α +σελίδα.σβέλτος αρχείο σε κάθε φάκελο για να ορίσετε το περιεχόμενο αυτής της διαδρομής.

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

Ο παραπάνω κωδικός θα βρίσκεται μέσα στο +σελίδα αρχείο. Θα δημιουργήσετε ένα σβέλτο αρχείο μέσα στο σχετικά με φάκελο στο src/διαδρομές Ευρετήριο. Αυτό το αρχείο θα περιέχει το περιεχόμενο για τη διαδρομή. Για να προβάλετε τη διαδρομή στο πρόγραμμα περιήγησής σας, μεταβείτε στο http://localhost: 5173/περίπου.

Πλοήγηση στο /about Η διαδρομή θα εμφανίσει αυτήν τη διεπαφή στην οθόνη σας:

Κατανόηση Ένθετων Διαδρομών

Οι ένθετες διαδρομές είναι ένας τρόπος δομής του συστήματος δρομολόγησης σε μια εφαρμογή Ιστού. Σε μια ένθετη δομή διαδρομής, οι διαδρομές τοποθετούνται μέσα σε άλλες διαδρομές, δημιουργώντας μια ιεραρχική σχέση μεταξύ τους. Μπορείτε να δημιουργήσετε ένθετες διαδρομές στο SvelteKit τοποθετώντας φακέλους με το +σελίδα.σβέλτος αρχείο μέσα σε άλλους φακέλους διαδρομής κάτω από το src/διαδρομές Ευρετήριο.

Για παράδειγμα:

Σε αυτό το παράδειγμα, τοποθετείτε το Θέση διαδρομή εντός του blog Διαδρομή. Να φωλιάσει το Θέση διαδρομή εντός του blog διαδρομή, δημιουργήστε το Θέση φάκελο και του +σελίδα.σβέλτος αρχείο μέσα στο blog φάκελο διαδρομής.

Για να αποκτήσετε πρόσβαση στη διαδρομή του ιστολογίου στην εφαρμογή σας, ανοίξτε το πρόγραμμα περιήγησής σας και μεταβείτε στο http://localhost: 5173/ιστολόγιο.

Η ταχυδρομική διαδρομή θα είναι διαθέσιμη στο http://localhost: 5173/ιστολόγιο/ανάρτηση.

Διατάξεις και διαδρομές σφαλμάτων

Το SvelteKit ορίζει α διάταξη για την εφαρμογή με παρόμοιο τρόπο με το Next.js. Και τα δύο πλαίσια χρησιμοποιούν α διάταξη στοιχείο για τον καθορισμό της δομής της εφαρμογής.

Το SvelteKit χρησιμοποιεί το +διάταξη.σβέλτος για να ορίσετε μια διάταξη για μια ομάδα σελίδων. Μπορείτε να δημιουργήσετε ένα +διάταξη.σβέλτος αρχείο στο src/διαδρομές κατάλογο για να ορίσετε μια διάταξη για όλες τις σελίδες στην εφαρμογή σας ή σε έναν υποκατάλογο για να ορίσετε μια διάταξη για μια συγκεκριμένη ομάδα σελίδων.

Ακολουθεί ένα παράδειγμα του τρόπου ορισμού μιας διαδρομής διάταξης για ολόκληρη την εφαρμογή σας:

Το παραπάνω παράδειγμα παρέχει μια διαδρομή διάταξης. Το αρχείο περιέχει α h1 στοιχείο που εμφανίζει το κείμενο "Αυτή είναι μια εφαρμογή SvelteKit." Περιλαμβάνει επίσης α θυρίδα στοιχείο. ο θυρίδα Το στοιχείο είναι ένα ειδικό στοιχείο που καθορίζει τη θέση όπου η εφαρμογή θα αποδώσει το περιεχόμενο των διαδρομών σας εντός της διάταξης. Λειτουργεί με τον ίδιο τρόπο όπως τα στοιχεία Vue.

Σε αυτήν την περίπτωση, η εφαρμογή σας θα αποδώσει τα περιεχόμενα των διαδρομών σας κάτω από το h1 στοιχείο.

Για να ορίσετε μια σελίδα σφάλματος, δημιουργήστε ένα αρχείο με το όνομα +λάθος.σβέλτος στο src/διαδρομές Ευρετήριο. Αυτή η σελίδα θα εμφανίζεται όταν παρουσιαστεί σφάλμα κατά την απόδοση.

Για παράδειγμα:

Όταν αντιμετωπίζετε ένα σφάλμα, όπως η πλοήγηση σε μια ανύπαρκτη διαδρομή, η εφαρμογή σας θα επιστρέψει σε αυτό λάθος αντ' αυτού διαδρομή.

Για παράδειγμα:

Η ΔΙΑΔΡΟΜΗ http://localhost: 5173/go δεν υπάρχει, επομένως η εφαρμογή αποδίδει το λάθος αντ' αυτού διαδρομή.

Πλοήγηση μεταξύ σελίδων

Η εύρεση του καλύτερου τρόπου πλοήγησης μεταξύ των διαδρομών που δημιουργείτε είναι ζωτικής σημασίας για μια καλή εμπειρία. Παραδοσιακά, η δρομολόγηση βάσει αρχείων στις περισσότερες τεχνολογίες χρησιμοποιεί συνδέσμους για πλοήγηση μεταξύ διαφορετικών σελίδων. Για πλοήγηση μεταξύ σελίδων στο SvelteKit, μπορείτε να χρησιμοποιήσετε μια απλή ετικέτα αγκύρωσης HTML.

Για παράδειγμα, μπορείτε να γράψετε αυτόν τον κώδικα σε οποιαδήποτε διαδρομή θέλετε, αλλά θα πρέπει να τον γράψετε στο διάταξη διαδρομή πάνω από το θυρίδα ετικέτα:

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

Κάνοντας κλικ σε οποιαδήποτε ετικέτα αγκύρωσης θα πλοηγηθείτε στην αντίστοιχη διαδρομή.

Δυναμική δρομολόγηση στο SvelteKit

Η δυναμική δρομολόγηση σάς επιτρέπει να δημιουργείτε σταδιακά διαδρομές που δημιουργεί η εφαρμογή με βάση δεδομένα ή παραμέτρους. Σας δίνει τη δυνατότητα να δημιουργήσετε ευέλικτες και δυναμικές εφαρμογές web που χειρίζονται διαφορετικές διαδρομές και εμφανίζουν περιεχόμενο σύμφωνα με συγκεκριμένα δεδομένα ή παραμέτρους.

Για να δημιουργήσετε μια δυναμική διαδρομή στο SvelteKit, δημιουργήστε έναν φάκελο με το όνομα [γυμνοσάλιαγκας] και μετά α +σελίδα.σβέλτος αρχείο στον φάκελο για να ορίσετε το περιεχόμενο της διαδρομής. Λάβετε υπόψη ότι μπορείτε να ονομάσετε το φάκελο όπως θέλετε, αλλά φροντίστε να τυλίγετε πάντα το όνομα σε αγκύλες [ ].

Ακολουθεί ένα παράδειγμα δυναμικής διαδρομής:

Για να αποκτήσετε πρόσβαση σε αυτήν τη διαδρομή στο πρόγραμμα περιήγησής σας, μεταβείτε σε αυτόν τον σύνδεσμο http://localhost: 5173/[γυάλιασμα], που [γυμνοσάλιαγκας] μπορεί να είναι οποιοδήποτε μοναδικό απροσδιόριστο όνομα διαδρομής που θα επιλέξετε.

Μπορείτε να αποκτήσετε πρόσβαση στην εφαρμογή σας [γυμνοσάλιαγκας] παράμετρος χρησιμοποιώντας το $page.params δεδομένα από $app/stores.

Για παράδειγμα:

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

Εδώ, αναθέτετε το $page.params αντίρρηση στο παραμ μεταβλητή και αποδίδουν το παραμ. γυμνοσάλιαγκας δεδομένα στην αίτησή σας.

Η εφαρμογή ανακτά το παραμ. γυμνοσάλιαγκας δεδομένα από τον σύνδεσμό σας. Για παράδειγμα, εάν πλοηγηθείτε σε http://localhost: 5173/πυρ, το περιεχόμενο που εμφανίζεται στην εφαρμογή θα είναι «Αυτή είναι η σελίδα της φωτιάς».

Τώρα γνωρίζετε τα βασικά της δρομολόγησης στο SvelteKit

Η δρομολόγηση στο SvelteKit είναι μια ισχυρή δυνατότητα που σας επιτρέπει να δομήσετε την εφαρμογή σας με τρόπο που να έχει νόημα. Η κατανόηση του τρόπου χρήσης αυτής της δυνατότητας θα σας επιτρέψει να δημιουργήσετε πιο αποτελεσματικές και φιλικές προς το χρήστη εφαρμογές web. Είτε δημιουργείτε ένα μικρό προσωπικό έργο είτε μια μεγάλης κλίμακας εφαρμογή, το σύστημα δρομολόγησης του SvelteKit διαθέτει τα εργαλεία που χρειάζεστε για να πετύχετε.