كيف يعمل التنقل بين الصفحات في Nuxt 3 ؟

الحمد لله الذي علَّم بالقلم، علَّم الإنسان ما لم يعلم، والصلاة والسلام على خير معلِّم الناس الخير سيدنا محمد - صلَّى الله عليه وسلم … أما بعد ،،

عند تطوير تطبيقات الويب الحديثة، يُعد التوجيه أو التنقل بين الصفحات (Routing) عنصراً أساسيًا لضمان تجربة مستخدم سلسة ومنظمة.

ولمن لا يعرف معنى التوجيه (Routing)، فإنه يرمز إلي عملية تحديد وتنظيم كيفية تنقل المستخدمين داخل تطبيقات الويب.

بشكل أساسي، عندما يقوم المستخدم بالنقر على رابط أو إدخال عنوان URL في المتصفح، يقوم نظام التوجيه بتحديد الصفحة أو المكون الذي يجب عرضه.

يساعد التوجيه في تحديد الوجهات داخل التطبيق، مثل عرض صفحة رئيسية، صفحة منتج، أو أي قسم آخر، وهو مسؤول عن توفير تجربة مستخدم متسلسلة ومنطقية من خلال ربط عناوين الويب بالمحتوى المناسب في التطبيق.

يتميز نظام التوجيه في Nuxt بمرونته العالية، مما يتيح للمطورين تحديد المسارات وتخصيصها بسهولة وفقًا لاحتياجات التطبيق، سواء كنت تطور تطبيقًا صغيرًا أو نظامًا معقدًا متعدد الصفحات.

سبق وأشرت - بشكل مختصر - في مقال سابق (6 أسباب قد تدفعك لاختيار Nuxt لتنفيذ مشروعك القادم) إلى ميزة "التوجيه المبنى على الملفات"،وفي هذا المقال أتحدث بشكل أكثر تفصيلاً عن طريقة إدارة التنقل بين الصفحات.

إن الصفحات في Nuxt هي جزء مهم وأساسي من هيكلية التطبيق، يتم إنشاء الصفحات من خلال وضع ملفات Vue داخل مجلد pages.

على سبيل المثال، إذا كنت ترغب في إنشاء صفحة رئيسية للتطبيق، يمكنك إنشاء ملف index.vue داخل مجلد pages

pages/
  └── index.vue

ضع داخل ملف index.vue المحتوى التالي

<template>
  <div>
    <h1>مرحبًا بك في الصفحة الرئيسية!</h1>
  </div>
</template>

في هذا المثال، الملف index.vue سينشئ تلقائيًا المسار / (الصفحة الرئيسية) عندما يفتح المستخدم التطبيق.

كيف يعمل نظام التوجيه المبني على الملفات ؟

نظام التوجيه المبنى على الملفات فى Nuxt يعمل بطريقة بسيطة وفعالة، حيث يعتمد على بنية أو تقسيمة الملفات داخل مجلد pages لإنشاء المسارات تلقائيًا.

هذا يعني أن كل ملف تقوم بإنشائه داخل هذا المجلد يُنشئ مسار (URL) يطابق اسم الملف، مما يجعل إدارة الصفحات والتوجيه أكثر سهولة.

بفرض أن لديك هيكل الملفات التالي في مجلد pages :

pages/
  ├── index.vue
  ├── about.vue
  └── products/
       └── index.vue

بناء على المثال السابق، فإن :

• الملف index.vue سينشئ المسار / (الصفحة الرئيسية).
• الملف about.vue سينشئ المسار /about.
• الملف products/index.vue سينشئ المسار /products.

بمجرد إضافة هذه الملفات، يقوم Nuxt تلقائيًا بإنشاء مسارات التوجيه المناسبة لهذه الصفحات دون الحاجة إلى أي إعدادات إضافية.

هذا الأسلوب يوفر وقتًا وجهدًا في بناء نظام التوجيه، ويجعل التعديل عليه أكثر سلاسة.

المسارات الديناميكية (Dynamic Routes)

هل سبق واحتجت إلى إنشاء صفحات دون معرفة الروابط الخاصة بها مسبقًا أثناء بناء التطبيق؟

إن التوجيه الديناميكي (Dynamic Routing) عبارة عن تقنية تُستخدم لإنشاء مسارات (URLs) تتغير بناءً على متغيرات معينة، مثل الـ(ID) الخاص بأحد المستخدمين.

بدلاً من إنشاء صفحات ثابتة لكل مستخدم، يمكننا إنشاء صفحة ديناميكية تُعرض بناءً على المعرف (ID) أو البيانات التي يتم تمريرها في المسار.

عند استخدام التوجيه الديناميكي، نقوم بإنشاء مسار يحتوي على متغير يُعرف بـ "parameter".

هذا المتغير يتم استبداله بقيمة فعلية عند الوصول إلى الصفحة، وفي Nuxt، يتم ذلك باستخدام الملفات التي تحتوي على اسم متغير بين قوسين مربعين داخل مجلد pages.

لنفترض أننا نريد إنشاء صفحة تُعرض معلومات عن مستخدم معين باستخدام معرف المستخدم (ID) في عنوان URL مثل /users/123.

في هذه الحالة، سنقوم بإنشاء ملف ديناميكي في مجلد pages/users بالشكل التالي:

pages/
  └── users/
       └── [id].vue

ان ملف [id] يشير الملف إلى مسار ديناميكي يحتوي على متغير يسمى id.

عند الدخول الى مسار مثل /users/123، سيقوم Nuxt تلقائيًا بتمرير قيمة 123 كمتغير id إلى المكون داخل الملف [id].

داخل الصفحة [id]، يمكن الوصول إلى هذا المعرف باستخدام الكود التالي:

<template>
  <div>
    <h1>User ID: {{ userId }}</h1>
  </div>
</template>

<script setup>
const route = useRoute()
const userId = route.params.id
</script>

في هذا المثال، نستخدم useRoute للوصول إلى المعرف الديناميكي id الممرر في عنوان URL.

بدلاً من إنشاء صفحة لكل مستخدم على حدة، يمكنك إنشاء صفحة واحدة ديناميكية تستقبل المتغيرات مثل المعرف وتعرض البيانات بناءً عليها.

هذا يوفر وقتًا وجهدًا في بناء التطبيقات ويسمح بالتعامل مع مجموعة متنوعة من البيانات دون الحاجة لإنشاء صفحة جديدة لكل مستخدم.

خاتمة

يُعد التوجيه (Routing) عنصرًا جوهريًا في بناء أي تطبيق ويب، إذ يمكّنك Nuxt من تنظيم صفحات ومكونات التطبيق بكفاءة عبر نظام توجيه مرن وقوي.

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

باستخدام هذه الأدوات المتقدمة، يمكنك بناء تطبيقات ديناميكية وفعّالة بكل سهولة مع Nuxt.

وفقنى الله وإياك إلى ما يحبه ويرضاه ،،