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

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

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

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

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

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

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

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

// imports nécessaires au routage
import Vue from 'vue'
import VueRouter from 'vue-router'
 
// plugin de routage
Vue.use(VueRouter)
 
// les composants cibles du routage
import Component1 from './components/Component1.vue'
import Component2 from './components/Component2.vue'
import Component3 from './components/Component3.vue'
 
 
// les routes de l'application
const routes = [
  // home
  { path: '/', name: 'home', component: Component1 },
  // Component1
  {
    path: '/vue1', name: 'vue1', component: Component1
  },
  {
    // Component2
    path: '/vue2', name: 'vue2', component: Component2
  },
  // Component3
  {
    path: '/vue3', name: 'vue3', component: Component3
  },
]
 
// le routeur
const router = new VueRouter({
  routes,
  mode: 'history',
})
 
// export du routeur
export default router

تعليقات

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

إذن لدينا هنا أربعة مسارات: [/]، /view1، /view2، /view3.

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

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

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

// imports
import Vue from 'vue'
import App from './App.vue'
 
// plugins
import BootstrapVue from 'bootstrap-vue'
Vue.use(BootstrapVue);
 
// bootstrap
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
 
// routeur
import monRouteur from './router'
 
// configuration
Vue.config.productionTip = false
 
// instanciation projet [App]
new Vue({
  name: "app",
  // vue principale
  render: h => h(App),
  // routeur
  router: monRouteur,
}).$mount('#app')

تعليقات

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

13.4. العرض الرئيسي [App]

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

<template>
  <div class="container">
    <b-card>
      <!-- a message -->
      <b-alert show variant="success" align="center">
        <h4>[vuejs-11] : routage et navigation</h4>
      </b-alert>
      <!-- the current routing view -->
      <router-view />
    </b-card>
  </div>
</template>
 
<script>
  export default {
    name: "app"
  };
</script>

تعليقات

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

13.5. تخطيط العرض

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

<template>
  <!-- line -->
  <div>
    <b-row>
      <!-- three-column zone -->
      <b-col cols="2" v-if="left">
        <slot name="left" />
      </b-col>
      <!-- nine-column zone -->
      <b-col cols="10" v-if="right">
        <slot name="right" />
      </b-col>
    </b-row>
  </div>
</template>
 
<script>
  export default {
    // paramètres
    props: {
      left: {
        type: Boolean
      },
      right: {
        type: Boolean
      }
    }
  };
</script>

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

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

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

المكون الذي يولد الكتلة [1] هو كما يلي:

<template>
  <!-- bootstrap menu with three options -->
  <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>

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

13.7. طرق العرض

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

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

<template>
  <Layout :left="true" :right="true">
    <!-- navigation -->
    <Navigation slot="left" />
    <!-- message-->
    <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",
    // composants utilisés
    components: {
      Layout, Navigation
    }
  };
</script>

تعليقات

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

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

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

<!-- vue n° 2 -->
<template>
  <Layout :left="true" :right="true">
    <!-- navigation -->
    <Navigation slot="left" />
    <!-- message -->
    <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",
    // composants de la vue
    components: {
      Layout, Navigation
    }
  };
</script>

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

<!-- vue n° 3 -->
<template>
  <Layout :left="true" :right="true">
    <!-- navigation -->
    <Navigation slot="left" />
    <!-- message -->
    <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",
    // composants de la vue
    components: {
      Layout,
      Navigation
    }
  };
</script>

13.8. تشغيل المشروع

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

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

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

وبالتالي، تم عرض المكون [Component1]. وهو يعرض العرض رقم 1 [2]. والآن، لنضغط على رابط [View 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]. الآن، دعونا نضغط على رابط [View 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. إذا نقرنا الآن على رابط [View 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].