13. مشروع [vuejs-11]: التوجيه والتنقل

التوجيه هو ما سيسمح للمستخدم بالتنقل بين الصفحات المختلفة للتطبيق.

هيكل المشروع كالتالي:

13.1. تثبيت التبعيات

يتطلب التوجيه في [Vue.js] التبعية [vue-router]:

• في [1-3]، يتم تثبيت التبعية [vue-router]؛
• في [4-6]، بعد تثبيت التبعية، تم تعديل الملف [package.json]؛

13.2. نص التوجيه [router.js]

يتم تسجيل قواعد التنقل في التطبيق في الملف [router.js] (يمكن أن يكون اسم البرنامج النصي أي اسم):

// الاستيرادات اللازمة للتوجيه
import Vue from 'vue'
import VueRouter from 'vue-router'

// مكوّن إضافي للتوجيه
Vue.use(VueRouter)

// المكونات المستهدفة للتوجيه
import Component1 from './components/Component1.vue'
import Component2 from './components/Component2.vue'
import Component3 from './components/Component3.vue'


// مسارات التطبيق
const routes = [
  // الصفحة الرئيسية
  { path: '/', name: 'home', component: Component1 },
  // المكون 1
  {
    path: '/vue1', name: 'vue1', component: Component1
  },
  {
    // المكون 2
    path: '/vue2', name: 'vue2', component: Component2
  },
  // المكون 3
  {
    path: '/vue3', name: 'vue3', component: Component3
  },
]

// الموجه
const router = new VueRouter({
  routes,
  mode: 'history',
})

// تصدير جهاز التوجيه
export default router

تعليقات

• سيحدد البرنامج النصي [router.js] قواعد التوجيه لتطبيقنا؛
• الأسطر 1-6: تنشيط المكون الإضافي [vue-router] الضروري للتوجيه. يتطلب هذا التنشيط استيراد الفئة/الدالة [Vue] (السطر 2) واستيراد المكون الإضافي للتوجيه (السطر 3). تم تثبيت هذا المكون الإضافي مع التبعية [router] التي قمنا بتثبيتها للتو؛
• الأسطر 8-11: استيراد العروض المستهدفة للتوجيه؛
• الأسطر 15-21: تعريف جدول المسارات. كل عنصر في هذا الجدول هو كائن له الخصائص التالية:
  • [path]: معرّف (URL) للعرض، وهو ما نريد عرضه في حقل ([URL]) بالمتصفح. يمكننا إدخال ما نشاء هنا؛
  • [name]: اسم المسار. هنا أيضًا يمكننا إدخال ما نريد؛
  • [component]: المكون الذي يعرض طريقة العرض. هنا يجب أن يكون مكونًا موجودًا بالضرورة؛

وبالتالي سيكون لدينا هنا أربعة مسارات [/, /vue1, /vue2, /vue3].

• الأسطر 33-36: الموجه هو مثيل للفئة [VueRouter] التي تم استيرادها في السطر 3. يتم هنا استخدام منشئ [VueRouter] مع معلمتين:
  • مسارات التطبيق؛
  • طريقة كتابة URL في المتصفح: يكتب الوضع الافتراضي [hash] URL في صيغة [localhost:8080/#/vue1] (# هي علامة الهاش). أما الوضع [history] فيزيل علامة # [localhost:8080/vue1]؛
• السطر 39: يتم تصدير جهاز التوجيه؛

13.3. البرنامج النصي الرئيسي [main.js]

النص البرمجي الرئيسي [main.js] هو كما يلي:

// عمليات الاستيراد
import Vue from 'vue'
import App from './App.vue'

// المكونات الإضافية
import BootstrapVue from 'bootstrap-vue'
Vue.use(BootstrapVue);

// Bootstrap
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

// الموجه
import monRouteur from './router'

// التكوين
Vue.config.productionTip = false

// إنشاء مثيل للمشروع [App]
new Vue({
  name: "app",
  // الصفحة الرئيسية
  render: h => h(App),
  // جهاز التوجيه
  router: monRouteur,
}).$mount('#التطبيق')

تعليقات

• السطر 14: يتم استيراد جهاز التوجيه الذي تم تصديره بواسطة البرنامج النصي [router.js]؛
• السطر 25: تم تمرير هذا الموجه كمعلمة لمُنشئ الفئة [Vue] الذي سيعرض العرض الرئيسي [App]، المرتبط بخاصية [router] الخاصة بالعرض؛

13.4. الطريقة الرئيسية [App]

فيما يلي كود العرض الرئيسي:

<template>
  <div class="container">
    <b-card>
      <!-- رسالة -->
      <b-alert show variant="success" align="center">
        <h4>[vuejs-11] : routage et navigation</h4>
      </b-alert>
      <!-- عرض التوجيه الحالي -->
      <router-view />
    </b-card>
  </div>
</template>

<script>
  export default {
    name: "app"
  };
</script>

تعليقات

• السطر 9: يعرض العرض الحالي للتوجيه. لا يتم التعرف على العلامة <router-view> إلا إذا تم تهيئة الخاصية [router] الخاصة بالعرض؛

13.5. تنسيق العرض

يتم تخطيط العروض بواسطة المكون [Layout] التالي:

<template>
  <!-- سطر -->
  <div>
    <b-row>
      <!-- منطقة ذات ثلاثة أعمدة -->
      <b-col cols="2" v-if="left">
        <slot name="left" />
      </b-col>
      <!-- منطقة ذات تسعة أعمدة -->
      <b-col cols="10" v-if="right">
        <slot name="right" />
      </b-col>
    </b-row>
  </div>
</template>

<script>
  export default {
    // الإعدادات
    props: {
      left: {
        type: Boolean
      },
      right: {
        type: Boolean
      }
    }
  };
</script>

لقد استخدمنا وشرحنا هذا التنسيق من قبل في المشروع [vuejs-06] الوارد في الفقرة [vuejs-06].

13.6. مكون التنقل

يوفر المكون [Navigation] قائمة تنقل للمستخدم:

المكون الذي يُنشئ الكتلة [1] هو التالي:

<template>
  <!-- قائمة Bootstrap ذات الخيارات الثلاثة -->
  <b-nav vertical>
    <b-nav-item to="/vue1" exact exact-active-class="active">Vue 1</b-nav-item>
    <b-nav-item to="/vue2" exact exact-active-class="active">Vue 2</b-nav-item>
    <b-nav-item to="/vue3" exact exact-active-class="active">Vue 3</b-nav-item>
  </b-nav>
</template>

• يُنشئ هذا الرمز الكتلة 1 المكونة من ثلاثة روابط تتيح التنقل؛
• يجب أن يتطابق السمة [to] لعلامات <b-nav-item> مع إحدى خصائص [path] لمسارات موجه التطبيق؛

13.7. طرق العرض

الطريقة رقم 1 هي كما يلي:

يتم إنشاء المناطق [3-4] بواسطة المكون [Component1] التالي:

<template>
  <Layout :left="true" :right="true">
    <!-- التنقل -->
    <Navigation slot="left" />
    <!-- رسالة-->
    <b-alert show variant="primary" slot="right">Vue 1</b-alert>
  </Layout>
</template>

<script>
  import Navigation from './Navigation';
  import Layout from './Layout';

  export default {
    name: "component1",
    // المكونات المستخدمة
    components: {
      Layout, Navigation
    }
  };
</script>

تعليقات

• السطر 2: تستخدم العرض رقم 1 تخطيط المكون [Layout] المكون من فتحتين تسميان [left, right]؛
• السطر 4: يتم وضع قائمة التنقل في الفتحة اليسرى. وهي المنطقة [3] التي نراها أعلاه؛
• السطر 6: يتم وضع رسالة في الفتحة اليمنى. وهي المنطقة [4] التي نراها أعلاه؛

العرضان 2 و3 متشابهان.

الطريقة رقم 2 المعروضة بواسطة المكون [Component2]:

<!-- الطريقة الثانية -->
<template>
  <Layout :left="true" :right="true">
    <!-- التنقل -->
    <Navigation slot="left" />
    <!-- رسالة -->
    <b-alert show variant="secondary" slot="right">Vue 2</b-alert>
  </Layout>
</template>

<script>
  import Navigation from './Navigation';
  import Layout from './Layout';

  export default {
    name: "component2",
    // مكونات العرض
    components: {
      Layout, Navigation
    }
  };
</script>

الطريقة رقم 3 المعروضة بواسطة المكون [Component3]:

<!-- الطريقة رقم 3 -->
<template>
  <Layout :left="true" :right="true">
    <!-- التنقل -->
    <Navigation slot="left" />
    <!-- رسالة -->
    <b-alert show variant="info" slot="right">Vue 3</b-alert>
  </Layout>
</template>

<script>
  import Navigation from "./Navigation";
  import Layout from "./Layout";

  export default {
    name: "component3",
    // مكونات العرض
    components: {
      Layout,
      Navigation
    }
  };
</script>

13.8. تنفيذ المشروع

عند التنفيذ، يتم عرض العرض التالي:

• في [1]، فإن URL هو [http://localhost:8080]. وعندها تم تنفيذ قاعدة التوجيه التالية:

{ path: '/', name: 'home', component: Component1 }

وبالتالي، تم عرض المكون [Component1]. وهو يعرض العرض رقم 1 [2]. والآن، لنضغط على الرابط [Vue 1] الذي يكون رمزه كما يلي:

<b-nav-item to="/vue1" exact exact-active-class="active">Vue 1</b-nav-item>

يصبح العرض كما يلي:

• في [3]، تم تنفيذ قاعدة التوجيه التالية:

path: '/vue1', name: 'vue1', component: Component1

وبالتالي، تم عرض المكون [Component1] مرة أخرى، ومن ثم العرض رقم 1 [4]. الآن، لنضغط على الرابط [Vue 2] الذي يحمل الرمز التالي:

<b-nav-item to="/vue2" exact exact-active-class="active">Vue 2</b-nav-item>

يصبح الشكل الجديد كما يلي:

• في [5]، تم تنفيذ قاعدة التوجيه التالية:

path: '/vue2', name: 'vue2', component: Component2

وبالتالي، تم عرض المكون [Component2]، أي العرض رقم 2. إذا نقرنا الآن على الرابط [Vue 3]، الذي يكون رمزه كما يلي:

<b-nav-item to="/vue3" exact exact-active-class="active">Vue 3</b-nav-item>

سنحصل على العرض الجديد التالي:

• في [6]، تم تنفيذ قاعدة التوجيه التالية:

path: '/vue3', name: 'vue3', component: Component3

وبالتالي، تم عرض المكون [Component3]، أي العرض رقم 3 [8].