توجه إلى Vue Router

المُقدّمة

عند تطوير تطبيقات الويب باستخدام Vue.js ، إلا إذا كنت تقوم بإنشاء ملف تطبيق من صفحة واحدة (واس)، سترغب في ربط عدة صفحات بصفحة مقصودة للسماح للمستخدمين بالتنقل خلالها. هذا هو المعروف باسم التوجيه.

التوجيه هو العملية التي يتم من خلالها انتقال المستخدم إلى صفحات مختلفة على موقع الويب. Vue.js هو إطار عمل JavaScript يُستخدم لإنشاء تطبيقات صفحة واحدة ، مما يعني أن هذا التطبيق يتم تحميله مرة واحدة فقط من الخادم إلى المتصفح ، ولا يحتاج المتصفح إلى إعادة التحميل عند التوجيه ؛ بدلاً من ذلك ، يطلب ببساطة هذه الصفحات ويتم تحميلها.

في هذا الدليل ، سنتعلم كيفية إجراء التوجيه باستخدام Vue.js ونلقي نظرة عميقة على أنواع التوجيه المختلفة التي يمكن القيام بها وكيف يمكن القيام بها.

كيف تبدأ

يتم إجراء التوجيه في Vue.js باستخدام جهاز التوجيه Vue، والذي يعمل جنبًا إلى جنب مع مكتبة Vue الأساسية للسماح لنا بإعداد نظام توجيه. نود أن نستخدم vue-router في سيناريوهين في مشروعنا. إما أننا نريد استخدام جهاز التوجيه في مشروع موجود أو إضافته أثناء إنشاء مشروع جديد.

قم بإعداد جهاز التوجيه Vue في مشروع موجود

دمج vue-router في مشروع قائم يمكن أن يكون تقنيًا ، وسنتناول هذه التفاصيل الآن. ستكون الخطوة الأولى هي تثبيت حزمة vue router باستخدام الأمر التالي:

! 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، وهو مسار عنوان url المرتبط بجذر الموقع ، و 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 Router مع 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 - via $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>

الموجهات

في حالة نريد فيها إعادة توجيه المستخدمين عند زيارتهم مسارًا معينًا ، على سبيل المثال ، إذا كان لدينا مسارًا سابقًا لم نعد نستخدمه ، فنحن نريد إعادة توجيه المستخدمين إلى المسار الجديد عند زيارتهم لهذا المسار. يمكن تحقيق ذلك بسهولة عن طريق إضافة كائن جديد إلى مصفوفة تكوين المسارات الخاصة بنا ، بامتداد 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 or -2.

دفع

push() يُستخدم عادةً بعد حدوث إجراء ما ويضيف مُدخلاً جديدًا إلى مكدس المحفوظات. على سبيل المثال ، إذا قام أحد المستخدمين بتسجيل الدخول بنجاح ، فإننا نرغب في الانتقال إلى صفحة لوحة التحكم برمجيًا. يتم تحقيق ذلك من خلال تضمين التابع push إلى جانب اسم المسار:

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

وفي الختام

التوجيه هو إحدى الوظائف الأساسية لـ Vue. ما لم تكن تقوم ببناء ملف تطبيق من صفحة واحدة (واس)، سترغب في ربط عدة صفحات بصفحة مقصودة للسماح للمستخدمين بالتنقل خلالها.

في هذا الدليل ، ألقينا نظرة على ماهية التوجيه وكيف يمكنك تثبيت vue-router في المشاريع الجديدة والحالية ، كيفية إجراء التحميل البطيء ، والتنقل بين المسارات ، وتنفيذ التوجيه الديناميكي ، والوصول إلى معلمات المسار والتنقل الآلي.

• كوينسمارت. أفضل بورصة للبيتكوين والعملات المشفرة في أوروبا.
• بلاتوبلوكشين. Web3 Metaverse Intelligence. تضخيم المعرفة. دخول مجاني.
• كريبتوهوك. الرادار. تجربة مجانية.
• المصدر: https://stackabuse.com/guide-to-vue-router/