شرح الكود

هذا السطر هنا:

mounted(){
  this.myRoutes = this.$router.options.routes
}

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

ويتم ذلك من خلال الوصول إلى this.$router، وهو كائن الراوتر العام المرتبط بالتطبيق، الذي يدير عملية التوجيه بين الصفحات.

هذا الراوتر يتم إنشاؤه عادة في ملف مثل router/index.js ويتم تمرير إعدادات إليه مثل وضع التوجيه (mode)، وقائمة الصفحات (routes) التي تمثل كل مسار يقود إلى مكون معين في واجهة المستخدم.

عند الوصول إلى this.$router.options.routes فإننا نقرأ خاصية routes من إعدادات الراوتر (options)، وهي عبارة عن مصفوفة تحتوي على جميع المسارات المعرفة في التطبيق، حيث يحتوي كل عنصر فيها على معلومات مثل path (رابط الصفحة)، name، وcomponent.

أما تخزين هذه القائمة في المتغير myRoutes فيتيح استخدام هذه المعلومات لاحقا داخل المكون، مثل عرض قائمة تنقل ديناميكية أو التحقق من وجود صفحات معينة أو تخصيص التوجيه بناء على شروط.

بالنسبة ل router هو النظام المسؤول عن التحكم في تنقل المستخدم بين صفحات التطبيق بدون إعادة تحميل الصفحة (SPA)، أما route فهو كائن يمثل الصفحة الحالية التي أنت فيها حاليًا، ويحتوي على معلومات مثل المسار الحالي (this.$route.path)، البارامترات (this.$route.params) والاستعلامات (this.$route.query).

الRouter هو عبارة عن نظام في Vue.js يتحكم في التنقل بين الصفحات دون إعادة تحميل الصفحة بالكامل يمكنك تخيله كخريطة طرق للتطبيق إليك هذا المثال:

const router = new VueRouter({
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About },
    { path: '/contact', component: Contact }
  ]
})

أما ال Route فهو مسار واحد أو صفحة واحدة في التطبيق وكل route يحتوي على:

• path: المسار في الرابط (مثل /home)
• component: المكوّن الذي سيظهر عند زيارة هذا المسار
• name: اسم اختياري للمسار

إليك هذا المثال:

{
  path: '/products',
  name: 'Products',
  component: ProductsPage
}

أما ال Options فهو عبارة عن هكائن يحتوي على جميع إعدادات ال router وأهمها:

• routes: وهو مصفوفة تحتوي على جميع المسارات
• mode: ويمثل نوع التنقل إما من خلال hash أو history
• base: وهو المسار الأساسي للتطبيق

بالنسبةللشيفرة التي شاركتها:

mounted(){
    this.myRoutes = this.$router.options.routes
}

ف this.$router.options.routes يعطينا قائمة بجميع الطرق أو بالأحرى الصفحات الموجودة في الموقع فمثلا إذا كان عندنا صفحة رئيسية وصفحة "من نحن" وصفحة "اتصل بنا" ستحصل على قائمة بهذه الصفحات الثلاث.

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

وللتوضيح أكثر فإن:

• mounted(): هي دالة تعمل بعد تحميل المكوّن بالكامل
• this.$router: نستخدمه للوصول لكائن ال router في المكوّن
• options: عبارة عن كائن الإعدادات الخاص بال router
• routes: مصفوفة جميع المسارات المعرّفة
• this.myRoutes: متغير في المكوّن نستخدمه لحفظ المسارات

بالإضفة للشرح السابق يمكننا فهم هذه المفاهيم بشكل أعمق، من خلال مثالاً لتطبيق Vue.js بسيط يستخدم Vue Router.

لنفترض أن لديك المكون الرئيسي لتطبيقك (App.vue) وتريد إنشاء قائمة تنقل ديناميكية بناءً على المسارات المعرفة

<template>
  <div id="app">
    <nav>
      <ul>
        <li v-for="route in myRoutes" :key="route.name">
          <router-link :to="route.path">{{ route.name }}</router-link>
        </li>
      </ul>
    </nav>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      myRoutes: [] // سنقوم بملء هذه المصفوفة في mounted
    };
  },
  mounted() {
    this.myRoutes = this.$router.options.routes;
    console.log('My defined routes:', this.myRoutes);
  }
};
</script>

 سيكون output في الـ console مثل

My defined routes: [
  { path: '/', name: 'Home', component: HomeComponent },
  { path: '/about', name: 'About', component: AboutComponent },
  { path: '/contact', name: 'Contact', component: ContactComponent, meta: { requiresAuth: true } }
]