מדריך לניתוב ב-SvelteKit

SvelteKit היא מסגרת לבניית אפליקציות אינטרנט בכל הגדלים, עם ניסיון רב בפיתוח וניתוב מבוסס קבצים גמיש. המסגרת משלבת יתרונות קידום אתרים של אפליקציות של עמוד בודד ושיפור מתקדם עם ניווט מהיר של יישומים מעובדים בצד השרת. אחת התכונות הקריטיות של SvelteKit היא מערכת הניתוב שלה.

הבנת ניתוב SvelteKit

SvelteKit היא מסגרת נבנה על גבי Svelte. ב-SvelteKit, הניתוב עוקב אחר מערכת מבוססת קבצים. המשמעות היא שמבנה הספריות של הדפים שלך קובע את המסלולים של היישום שלך.

כדי להבין טוב יותר את מערכת הניתוב של SvelteKit, ראשית, צור פרויקט SvelteKit. לשם כך, הפעל את הקוד הבא בטרמינל שלך:

npm create svelte@latest my-app

לאחר הפעלת בלוק הקוד שלמעלה, תענה על סדרה של הנחיות להגדרת היישום שלך.

לאחר מכן, התקן את התלות הנדרשת עבור הפרויקט שלך. כדי לעשות זאת CD לתוך הפרויקט שלך והפעל:

npm install

פתח את הפרויקט בשרת הפיתוח על ידי הפעלת הפקודה הבאה בטרמינל שלך:

npm run dev

כעת, הפרויקט שלך יתחיל לפעול http://localhost: 5173/. כשתפתח את האפליקציה בשרת הפיתוח שלך, יהיה לך ממשק דומה לתמונה למטה.

מסלול השורש של הפרויקט ‘/’ מתאים לקובץ בשם +page.svelte. אתה יכול למצוא את +page.svelte קובץ בעקבות נתיב הקובץ; src/מסלולים בפרויקט שלך.

כדי ליצור מסלולים שונים ב-SvelteKit, אתה יכול ליצור תיקיות ב- src/מסלולים מַדרִיך. כל תיקיה תתאים למסלול אחר. צור א +page.svelte קובץ בכל תיקיה כדי להגדיר את התוכן של המסלול הזה.

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

הקוד שלמעלה יחיה בתוך +דף קוֹבֶץ. אתה תיצור קובץ svelte בתוך על אודות תיקייה ב- src/מסלולים מַדרִיך. קובץ זה יכיל את התוכן של המסלול. כדי להציג את המסלול בדפדפן האינטרנט שלך, נווט אל http://localhost: 5173/בערך.

ניווט אל /about מסלול יציג את הממשק הזה על המסך שלך:

הבנת מסלולים מקוננים

מסלולים מקוננים הם דרך לבנות את מערכת הניתוב באפליקציית אינטרנט. במבנה מסלול מקונן, מסלולים ממוקמים בתוך מסלולים אחרים, ויוצרים קשר היררכי ביניהם. אתה יכול ליצור מסלולים מקוננים ב-SvelteKit על ידי הצבת תיקיות עם +page.svelte קובץ בתוך תיקיות מסלול אחרות מתחת ל- src/מסלולים מַדרִיך.

לדוגמה:

בדוגמה זו, אתה מקנן את הודעה מסלול בתוך ה בלוג מַסלוּל. כדי לקנן את הודעה מסלול בתוך ה בלוג מסלול, צור את הודעה תיקיה ושלה +page.svelte קובץ בתוך בלוג תיקיית מסלול.

כדי לגשת למסלול הבלוג באפליקציה שלך, פתח את דפדפן האינטרנט שלך ונווט אל http://localhost: 5173/בלוג.

מסלול הפוסט יהיה זמין ב http://localhost: 5173/בלוג/פוסט.

פריסות ומסלולי שגיאות

SvelteKit מגדירה א פריסה עבור האפליקציה בצורה דומה ל-Next.js. שתי המסגרות משתמשות ב-a מַעֲרָך רכיב להגדרת מבנה האפליקציה.

SvelteKit משתמש ב- +layout.svelte כדי להגדיר פריסה עבור קבוצת דפים. אתה יכול ליצור א +layout.svelte קובץ ב- src/מסלולים ספרייה כדי להגדיר פריסה עבור כל הדפים ביישום שלך או בספריית משנה כדי להגדיר פריסה עבור קבוצת דפים ספציפית.

להלן דוגמה כיצד להגדיר מסלול פריסה עבור היישום כולו:

הדוגמה למעלה מספקת מסלול פריסה. הקובץ מכיל א h1 אלמנט המציג את הטקסט "זהו יישום SvelteKit." הוא כולל גם א חָרִיץ אֵלֵמֶנט. ה חָרִיץ אלמנט הוא אלמנט מיוחד המגדיר את המיקום שבו האפליקציה תציג את תוכן המסלולים שלך בתוך הפריסה. זה עובד באותו אופן כמו רכיבי Vue.

במקרה זה, היישום שלך יציג את תוכן המסלולים שלך מתחת ל- h1 אֵלֵמֶנט.

כדי להגדיר דף שגיאה, צור קובץ בשם +error.svelte בתוך ה src/מסלולים מַדרִיך. דף זה יוצג כאשר מתרחשת שגיאה במהלך העיבוד.

לדוגמה:

כאשר אתה נתקל בשגיאה, כגון ניווט למסלול לא קיים, היישום שלך יחזור לזה שְׁגִיאָה מסלול במקום.

לדוגמה:

המסלול http://localhost: 5173 לדרך לא קיים, אז האפליקציה מעבדת את שְׁגִיאָה מסלול במקום.

ניווט בין דפים

מציאת הדרך הטובה ביותר לנווט בין המסלולים שאתה יוצר היא חיונית לחוויה טובה. באופן מסורתי, ניתוב מבוסס קבצים ברוב הטכנולוגיות משתמש בקישורים כדי לנווט בין דפים שונים. כדי לנווט בין דפים ב-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

ניתוב דינמי מאפשר לך ליצור בהדרגה מסלולים שהאפליקציה מייצרת בהתבסס על נתונים או פרמטרים. זה מאפשר לך ליצור אפליקציות אינטרנט גמישות ודינמיות המטפלות במסלולים שונים ומציגות תוכן לפי נתונים או פרמטרים ספציפיים.

כדי ליצור מסלול דינמי ב-SvelteKit, צור תיקייה בשם [שבלול] ולאחר מכן א +page.svelte קובץ בתיקייה כדי להגדיר את תוכן המסלול. שים לב שאתה יכול לתת לתיקייה שם איך שתרצה, אך הקפד לעטוף את השם תמיד בסוגריים [ ].

הנה דוגמה למסלול דינמי:

כדי לגשת למסלול זה בדפדפן האינטרנט שלך, נווט אל הקישור הזה 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 מתנגד ל param משתנה ולעבד את param.slug נתונים באפליקציה שלך.

האפליקציה מאחזרת את param.slug נתונים מהקישור שלך. לדוגמה, אם אתה מנווט אל http://localhost: 5173/אש, התוכן המוצג באפליקציה יהיה "זה דף האש."

עכשיו אתה יודע את היסודות של ניתוב ב-SvelteKit

ניתוב ב-SvelteKit הוא תכונה רבת עוצמה המאפשרת לך לבנות את היישום שלך בצורה הגיונית. הבנה כיצד להשתמש בתכונה זו תאפשר לך ליצור יישומי אינטרנט יעילים וידידותיים יותר למשתמש. בין אם אתה יוצר פרויקט אישי קטן או יישום בקנה מידה גדול, למערכת הניתוב של SvelteKit יש את הכלים הדרושים לך כדי להצליח.