מדריך לנתב Vue

מבוא

בעת פיתוח יישומי אינטרנט עם Vue.js, אלא אם כן אתה בונה א יישום בעמוד אחד (SPA), תרצה לחבר דפים מרובים לדף נחיתה כדי לאפשר למשתמשים לנווט בהם. זה ידוע בשם ניתוב.

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

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

תחילת העבודה

הניתוב ב-Vue.js נעשה עם נתב Vue, אשר פועלת במקביל לספריית הליבה Vue כדי לאפשר לנו להגדיר מערכת ניתוב. נרצה להשתמש vue-router בשני תרחישים בפרויקט שלנו. אנחנו רוצים להשתמש בנתב בפרויקט קיים או להוסיף אותו תוך כדי יצירת פרויקט חדש.

הגדר נתב Vue בפרויקט קיים

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

! npm install vue-router@4

לאחר ההתקנה, נווט אל src תיקיה וצור תיקייה בשם router, ואחריו קובץ בשם index.js ב router תיקייה, שתשמש כקובץ תצורת הנתב שלנו. שֶׁלָנוּ src הספרייה תיראה כעת כך:

ב index.js קובץ, בואו נוודא שנדביק את הקוד למטה, שהוא קוד תצורת הנתב:

import { createRouter, createWebHashHistory } from 'vue-router'
import HomePage from '../views/HomePage.vue' const routes = [ { path: '/', name: 'home', component: HomePage },
] const router = createRouter({ history: createWebHashHistory(), routes
})
export default router

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

כל אחד מאלה routes אובייקטים מורכבים בדרך כלל מה path, שהוא נתיב כתובת האתר ביחס לשורש האתר, ה name, המשמש כמזהה, וה- component, שייבאנו בראש העמוד.

מלבד מערך המסלולים, הגדרנו את מופע הנתב בתחתית על ידי יצירת א createRouter() תפקוד ועובר ב history ערכי מפתח ואת routes מערך, ולאחר מכן אנו מייצאים את router דוגמה לשימוש בתוך האפליקציה שלנו.

כדי להשתמש בתצורת הנתב הזו בתוך האפליקציה שלנו, פתח את main.js הקובץ src תיקייה, import router from "./router"ולאחר מכן הוסף .use(router) בֵּין createApp(App) ו .mount('#app') בדיוק כמו שזה למטה:

import router from './router' createApp(App).use(router).mount('#app')

זֶה vue-router הוגדר באופן גלובלי בתוך האפליקציה שלנו, והשלב הבא הוא להשתמש בו בתוך האפליקציה שלנו. זה מושג בקלות על ידי הכללה <router-view /> בתוך App.js תג תבנית, המציג רק את המסלול המותאם:

<!--App.vue -->
<template>
<!-- Any code placed here is going to be fixed -->
<!-- This will only show the page that matches the selected route --> <router-view /> <!-- Any code placed here is going to be fixed -->
</template> <script> export default { name: 'App', }
</script>

הגדרת מסלולים ב-Vue.js

מסלולים נוצרים בדרך כלל ב router/index.js מערך המסלולים של הקובץ, והמסלולים הללו מתחברים לרכיבים. מומלץ ליצור תיקיית תצוגות שבה כל הצפיות בעמוד יאוחסנו. לדוגמה:

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

התקן נתב Vue עם Vue CLI

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

כל שעלינו לעשות הוא להשתמש ב-Vue CLI כדי להתקין את הגרסה העדכנית ביותר של vue-router תוך בחירה ידנית של תכונות בתהליך יצירת הפרויקט שלנו:

קרא ולמד עוד על יצירת פרויקט Vue.js דרך שלנו מדריך ל-Vue CLI!

מסלולי טעינה עצלנית עם נתב Vue

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

בדרך כלל זה מושג בקובץ התצורה של הנתב על ידי הסרת ה- import הצהרה בחלק העליון והחלפתה בהצהרת ייבוא ​​דינמית באפשרות הרכיב של המסלול שלנו:

import { createRouter, createWebHashHistory } from 'vue-router';
const routes = [ { path: '/', name: 'home', component: () => import(/* webpackChunkName: "home" */ '../views/HomePage.vue'), }, { path: '/about', name: 'about', component: () => import(/* webpackChunkName: "about" */ '../views/AboutPage.vue'), },
];
const router = createRouter({ history: createWebHashHistory(), routes,
});
export default router;

ניווט בין מסלולים עם

עד כה, הצלחנו ליצור מסלולים, אבל איך מנווטים בתוך האפליקציה שלנו? אנו משתמשים ב- <router-link> תג במקום ה- <a> רכיב ב-HTML כדי לטפל בניתוב.

לדוגמה, אם ברצוננו ליצור סרגל ניווט בחלק העליון של האפליקציה שלנו, נוכל לעשות זאת ב- App.js קובץ מעל ה <router-view/> תג כך שהוא יופיע בכל המסלולים:

<nav> <router-link to="/">Home</router-link> | <router-link to="/about">About</router-link>
</nav>

קישור הנתב מקבל את to='path' תכונה שלוקחת את המשתמש לנתיב של הרכיב כפי שהוגדר בעת הגדרת המסלול. זה עובד כמו ה href='path``' תכונה ב-HTML.

שימוש בנתיבים בעלי שם

שימוש במסלולים בעלי שם מאפשר לנו לעבור ב name מפתח שיש לו גישה ל- name מאפיין שאנו מגדירים בעת קביעת תצורת המסלולים במקום להשתמש בנתיב על ידי קשירת הנתונים בצורה זו:

<router-link :to="{ name: 'About' }">About</router-link>

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

ניתוב דינמי

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

יהיו לנו שני עמודים - אחד כדי להציג את הפירות ברשימה ואחד כדי להציג את הפרטים של כל פרי, שהוא דף "שרטוט" שיאוכלס בפרטי הפרי. אנו ניצור את הדפים בתיקיית Vue ולאחר מכן נוסיף את המסלולים ל- routes מערך:

import FruitsPage from '../views/FruitsPage.vue';
import FruitDetails from '../views/FruitDetails.vue'; const routes = [ { path: '/fruits', name: 'Fruits', component: FruitsPage, }, { path: '/fruits/:id', name: 'FruitDetails', component: FruitDetails, },
];

אנו נשים לב כי עבור FruitDetails דף, הוספנו דינמיקה id נכס אז הוא מקבל את id פרמטר ומשתמש בו כדי לבצע שאילתות בנתונים המסוימים שמופיעים בדף זה באמצעות $route.params בתבנית שלנו, ובכך להפוך את המסלול לדינמי.

ב FruitsPage, נניח שיש לנו מערך של פירות שאנו בלולאה לתוך היישום שלנו, נוכל לעטוף כל פרי בקישור לצד פרמים בצורה זו:

<!-- FruitsPage.vue --> <template> <h1>Fruits page</h1> <div :key="fruit.id" v-for="fruit in fruits"> // dynamic linking by attaching the id as params <router-link :to="{ name: 'FruitDetails', params: { id: fruit.id } }"> <h3>{{ fruit.name }}</h3> </router-link> </div>
</template> <script> export default { data() { return { fruits: [ { id: 1, name: 'Apple', description: "Apples are an incredibly nutritious fruit.", }, { id: 2, name: 'Mango', description: 'A mango is an edible stone fruit produced by the tropical.', }, { id: 3, name: 'Banana', description: 'A banana is an elongated, edible fruit of the genus Musa.', }, ], }; }, };
</script>

בשלב זה כאשר משתמש לוחץ על כל פרי, הוא יעביר אותו אל ה- FruitDetails דף שבו נוכל לגשת ל id פרמטר והשתמש בו כדי לזהות את פרטי הפרי שיש להציג ב- FruitDetails עמוד.

גש לפרמטרי המסלול

עד כה ראינו כיצד להעביר פרמטרים לעמוד מסוים באופן דינמי, בוא נראה כעת כיצד נוכל לגשת לפראם הזה ב- FruitDetails עמוד. ישנן שתי דרכים שבהן נוכל לגשת לפרמטרים ב-Vue - באמצעות $route.params או שימוש באביזרים:

שימוש $route.params

הפרמטרים נגישים ישירות דרך $route.params:

<template> <h1>Fruit Details</h1> <p>This is fruit with the id of {{ $route.params.id }}</p>
</template>

או שנוכל לגשת אליו בתוך שלנו data() שיטה באמצעות this:

<template> <h1>Fruit Details</h1> <p>This is fruit with the id of {{ id }}</p>
</template> <script> export default { data() { return { id: this.$route.params.id, }; }, };
</script>

שימוש ב-Vue Props

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

{ path: '/fruits/:id', name: 'FruitDetails', component: FruitDetails, props: true,
},

בדרך זו, כל מה שאנחנו צריכים לעשות זה להוסיף props אפשרות script לתייג ולאחר מכן להשתמש באביזרים שלנו template תג:

<template> <h1>Fruit Details</h1> <p>This is fruit with the id of {{ id }}</p>
</template> <script> export default { props: ['id'], };
</script>

404 שגיאות - מסלול לא נמצא

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

זה מטופל בקלות על ידי יצירת רכיב עבור דף 404 שלנו ולאחר מכן הוספת מסלול 404 למערך המסלולים של קובץ התצורה של הנתב שלנו, אבל הפעם נשתמש בביטוי רגולרי כדי לתפוס את כל המסלולים שלא הוכרזו קודם לכן:

{ path: '/:catchAll(.*)', name: 'ErrorPage', component: ErrorPage,
}

השמיים :catchAll הוא הקטע הדינמי שמקבל ביטוי רגולרי של (.*) שבו משתמש Vue Router כדי לבדוק אם המסלול שאליו המשתמש מנווט מוגדר בקובץ התצורה של הנתב שלנו. אם מסלולים כאלה לא קיימים, המשתמש מופנה לרכיב, שבמקרה שלנו הוא ה- ErrorPage רְכִיב:

<template> <h2>404 Page</h2> <p>This is a 404 page</p> <p>Visit home page <router-link to="/">here</router-link></p>
</template>

מפנה מחדש

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

{ path: '/fruits', name: 'Fruits', component: FruitsPage,
},
{ path: '/all-frults', redirect: '/fruits',
},

כל מה שהקוד למעלה עושה הוא שאם משתמש מבקר, הנתיב /all-fruits, זה יפנה אותם ל- /fruits המסלול.

ניווט פרוגרמטי

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

היסטוריית הנתב

אנו יכולים להשתמש בהיסטוריית הדפדפן כדי לנווט בקלות אחורה או קדימה, בהתאם להעדפות שלנו. אם אתה זוכר, יש לנו א createRouter() פונקציה בקובץ התצורה של הנתב שבו הגדרנו א history ערך, המאפשר לנתב Vue לעקוב אחר היסטוריית הנתב שלנו בזמן שאנו מנתבים דרך יישום האינטרנט.

זה מאפשר לנו לעבור בהיסטוריה של הדפדפן, בהתבסס על תנאי כגון לחיצת כפתור:

<template> <h1>Fruit Details</h1> <p>This is fruit with the id of {{ id }}</p> <button @click="goBack">Go Back</button>
</template> <script> export default { props: ['id'], methods:{ goBack(){ this.$router.go(-1) } } };
</script>

אנחנו יכולים גם להחליט ללכת קדימה על ידי שימוש ב- 1 במקום -1 ונניח שאנחנו רוצים לעבור ב-2 שלבים שנוכל להשתמש בשניהם 2 or -2.

דחוף

push() משמש בדרך כלל לאחר שהתרחשה פעולה ומוסיף ערך חדש לערימת ההיסטוריה. לדוגמה, אם משתמש נכנס בהצלחה, נרצה להיות מנווט לדף מרכז השליטה באופן פרוגרמטי. זה מושג על ידי הכללת שיטת הדחיפה לצד שם המסלול:

this.$router.push({ name: 'Dashboard' });

סיכום

ניתוב הוא אחת מפונקציות הליבה של Vue. אלא אם כן אתה בונה א יישום בעמוד אחד (SPA), תרצה לחבר דפים מרובים לדף נחיתה כדי לאפשר למשתמשים לנווט בהם.

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

• Coinsmart. בורסת הביטקוין והקריפטו הטובה באירופה.
• Platoblockchain. Web3 Metaverse Intelligence. ידע מוגבר. גישה חופשית.
• CryptoHawk. רדאר אלטקוין. ניסיון חינם.
• מקור: https://stackabuse.com/guide-to-vue-router/