12. مثال [nuxt-09]: التحكم في التنقل

يستخدم المثال [nuxt-09] برنامج وسيط للتحكم في التنقل على العميل. بالإضافة إلى ذلك، تمت إضافة عرض جديد للحالات التي يطلب فيها المستخدم عنوان URL من الخادم غير موجود في التطبيق.

يتم إنشاء المثال [nuxt-09] مبدئيًا عن طريق نسخ المثال [nuxt-01]:

12.1. الصفحة [_.vue]

ذكرنا أن مسارات التطبيق يتم إنشاؤها من محتويات مجلد [pages]. هنا، أضفنا صفحة [_.vue] إلى هذا المجلد. يتم عرض هذه الصفحة المحددة كلما تم توجيه التطبيق إلى صفحة غير موجودة. في مثالنا هنا، لا يمكن أن يحدث هذا بالنسبة للعميل. ولكنه يمكن أن يحدث بالنسبة للخادم إذا طُلب منه، على سبيل المثال، عنوان URL [/nuxt-09/abcd]. ونظرًا لأن صفحة [abcd] غير موجودة، فسيتم عرض صفحة [_.vue]. وهنا، سيبدو الأمر كما يلي:

فيما يلي كود صفحة [_.vue]:

<!-- définition HTML de la vue -->
<template>
  <!-- mise en page -->
  <Layout :left="true" :right="true">
    <!-- alerte dans la colonne de droite -->
    <template slot="right">
      <!-- message sur fond jaune -->
      <b-alert show variant="warning" align="center">
        <h4>La page demandée n'existe pas</h4>
      </b-alert>
    </template>
    <!-- menu de navigation dans la colonne de gauche -->
    <Navigation slot="left" />
  </Layout>
</template>
 
<script>
/* eslint-disable no-undef */
/* eslint-disable no-console */
/* eslint-disable nuxt/no-env-in-hooks */
 
import Layout from '@/components/layout'
import Navigation from '@/components/navigation'
 
export default {
  name: '404',
  // components used
  components: {
    Layout,
    Navigation
  },
  // life cycle
  beforeCreate() {
    // client and server
    console.log('[404 beforeCreate]')
  },
  created() {
    // client and server
    console.log('[404 created]')
  },
  beforeMount() {
    // customer only
    console.log('[404 beforeMount]')
  },
  mounted() {
    // customer only
    console.log('[404 mounted]')
  }
}
</script>

12.2. برنامج الوسيط الخاص بالعميل

فيما يلي كود البرمجيات الوسيطة للعميل [توجيه العميل]:

/* eslint-disable no-undef */
/* eslint-disable no-console */
export default function({ route, from, redirect }) {
  // seulement le client
  if (process.client) {
    console.log('[client-routing]')
    // ordre de navigation souhaité
    const routes = ['index', 'page1', 'page2', 'index']
    // route courante
    const current = route.name
    // route précédente
    const previous = from.name
    // on veut une navigation circulaire
    // routes[i] vers routes[i+1]
    for (let i = 0; i < routes.length - 1; i++) {
      if (previous === routes[i] && current !== routes[i + 1]) {
        // on reste sur la même page
        redirect({ name: routes[i] })
        return
      }
    }
  }
}

• السطر 3: نعلم أن دالة التوجيه تأخذ معلمة واحدة فقط، وهي كائن [context] للكيان الذي ينفذها، سواء كان الخادم أو العميل. الترميز [function({ route, from, redirect })]
  • مكافئ لـ [function({ route:route, from:from, redirect:redirect })]؛
  • مما يعني أن { route:route, from:from, redirect:redirect } <-- context;
  • مما ينتج عنه ثلاثة معلمات [route, from, redirect] مثل:
    • route=context.route;
    • redirect=context.redirect;
    • from=context.from;

تستخدم وثائق [nuxt] هذه الصيغة بشكل مكثف. من المهم أن تكون على دراية بها؛

• السطر 8: مصفوفة من أسماء الصفحات بالترتيب المطلوب للتنقل
• السطر 10: اسم الصفحة المقصودة للمسار الحالي؛
• السطر 12: اسم الصفحة السابقة في المسار الحالي؛
• السطر 14: كتمرين، سنسمح فقط بالتنقل الدائري [index --> page1 --> page2 --> index]؛
• الأسطر 15–21: نكرر المصفوفة لتحديد ترتيب التنقل المطلوب؛
• السطر 16: إذا وجدنا أن routes[i] كانت آخر صفحة تم التنقل إليها، فإن الصفحة التالية يجب أن تكون routes[i+1]؛
• السطران 18-19: إذا لم يكن الأمر كذلك، فإننا نعيد توجيه التطبيق إلى routes[i]، أي أننا لا نغير الصفحات: نرفض التنقل؛

12.3. التنفيذ

نقوم بتشغيل المثال باستخدام ملف [nuxt.config.js] التالي:

export default {
  mode: 'universal',
  /*
   ** Headers of the page
   */
  head: {
    title: process.env.npm_package_name || "Introduction à nuxt.js par l'exemple",
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
    ],
    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }]
  },
  /*
   ** Customize the progress-bar color
   */
  loading: { color: '#fff' },
  /*
   ** Global CSS
   */
  css: [],
  /*
   ** Plugins to load before mounting the App
   */
  plugins: [],
  /*
   ** Nuxt.js dev-modules
   */
  buildModules: [
    // Doc: https://github.com/nuxt-community/eslint-module
    '@nuxtjs/eslint-module'
  ],
  /*
   ** Nuxt.js modules
   */
  modules: [
    // Doc: https://bootstrap-vue.js.org
    'bootstrap-vue/nuxt',
    // Doc: https://axios.nuxtjs.org/usage
    '@nuxtjs/axios'
  ],
  /*
   ** Axios module configuration
   ** See https://axios.nuxtjs.org/options
   */
  axios: {},
  /*
   ** Build configuration
   */
  build: {
    /*
     ** You can extend webpack config here
     */
    extend(config, ctx) {}
  },
  // source code directory
  srcDir: 'nuxt-09',
  router: {
    base: '/nuxt-09/',
    middleware: ['client-routing']
  },
  // server
  server: {
    port: 81, // default: 3000
    host: 'localhost' // default: localhost
  }
}

تحقق مما يلي:

• عندما تكون في صفحة [الصفحة الرئيسية]، لا يمكنك الانتقال إلا إلى صفحة [الصفحة 1]؛
• عندما تكون في صفحة [الصفحة 1]، لا يمكنك الانتقال إلا إلى صفحة [الصفحة 2]؛
• عندما تكون في صفحة [الصفحة 2]، يمكنك الانتقال فقط إلى صفحة [الصفحة الرئيسية]؛
• عندما تطلب عنوان URL غير صالح مثل [http://localhost:81/nuxt-09b/abcd]، ستظهر لك شاشة تشير إلى أن الصفحة المطلوبة غير موجودة؛