12. مثال [nuxt-09]: کنترل ناوبری

مثال [nuxt-09] از یک میان‌افزار برای کنترل ناوبری مشتری استفاده می‌کند. علاوه بر این، یک نمای جدید برای مواردی که کاربر از سرور URL را درخواست می‌کند که در برنامه وجود ندارد، اضافه شده است.

مثال [nuxt-09] در ابتدا با کپی کردن مثال [nuxt-01] ایجاد می‌شود:

12.1. صفحه [_.vue]

ما گفته‌ایم که مسیرهای برنامه از محتویات پوشه [pages] ساخته می‌شوند. در اینجا، ما صفحه [_.vue] را به این پوشه اضافه کرده‌ایم. این صفحه خاص هر زمان که برنامه به صفحه‌ای که وجود ندارد مسیریابی شود، نمایش داده می‌شود. در مثال ما، این اتفاق برای کلاینت رخ نمی‌دهد. با این حال، اگر برای مثال، درخواست URL یا [/nuxt-09/abcd] شود، این اتفاق می‌تواند برای سرور رخ دهد. از آنجایی که صفحه [abcd] وجود ندارد، صفحه [_.vue] نمایش داده خواهد شد. در این مورد، این صفحه به شکل زیر خواهد بود:

کد صفحه [_.vue] به شرح زیر است:

<!-- HTML تعریف نما -->
<template>
  <!-- چیدمان -->
  <Layout :left="true" :right="true">
    <!-- هشدار در ستون سمت راست -->
    <template slot="right">
      <!-- پیام روی پس‌زمینه زرد -->
      <b-alert show variant="warning" align="center">
        <h4>La page demandée n'existe pas</h4>
      </b-alert>
    </template>
    <!-- منوی ناوبری در ستون سمت چپ -->
    <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: {
    Layout,
    Navigation
  },
  //چرخهٔ عمر
  beforeCreate() {
    // کلاینت و سرور
    console.log('[404 beforeCreate]')
  },
  created() {
    // کلاینت و سرور
    console.log('[404 created]')
  },
  beforeMount() {
    //فقط کلاینت
    console.log('[404 beforeMount]')
  },
  mounted() {
    // فقط کلاینت
    console.log('[404 mounted]')
  }
}
</script>

12.2. میان‌افزار کلاینت

کد میان‌افزار سمت کلاینت برای [client-routing] به شرح زیر است:

/* eslint-disable no-undef */
/* eslint-disable no-console */
export default function({ route, from, redirect }) {
  //فقط برای کلاینت
  if (process.client) {
    console.log('[client-routing]')
    // ترتیب ناوبری مورد نظر
    const routes = ['index', 'page1', 'page2', 'index']
    // مسیر فعلی
    const current = route.name
    //مسیر قبلی
    const previous = from.name
    // ما یک مسیر دایره‌ای می‌خواهیم
    //مسیرها[i] به مسیرها[i+1]
    for (let i = 0; i < routes.length - 1; i++) {
      if (previous === routes[i] && current !== routes[i + 1]) {
        // ما در همان صفحه می‌مانیم
        redirect({ name: routes[i] })
        return
      }
    }
  }
}

• خط ۳: می‌دانیم که تابع مسیریابی تنها یک پارامتر دریافت می‌کند، شیء [context] از سوی انتهایی که آن را اجرا می‌کند، چه سرور باشد چه کلاینت. نشانه‌گذاری [function({ route, from, redirect })]
  • معادل [function({ route:route, from:from, redirect:redirect })] است؛
  • که به این معنی است که { route:route, from:from, redirect:redirect } <-- زمینه؛
  • که سه پارامتر [route, from, redirect] را به شرح زیر ایجاد می‌کند:
    • route=context.route;
    • redirect=context.redirect;
    • from=context.from;

مستندات [nuxt] به طور گسترده از این نشانه استفاده می‌کند. آشنایی با آن ضروری است؛

• خط ۸: آرایه‌ای از نام صفحات در ترتیب ناوبری مورد نظر
• خط ۱۰: نام صفحه مقصد برای مسیریابی فعلی؛
• خط ۱۲: نام صفحه قبلی در مسیر ناوبری فعلی؛
• خط ۱۴: به عنوان یک تمرین، ما فقط اجازه ناوبری حلقوی [index --> page1 --> page2 --> index] را می‌دهیم؛
• خطوط ۱۵–۲۱: ما آرایه‌ای را که ترتیب ناوبری مورد نظر را مشخص می‌کند، به‌صورت بازگشتی طی می‌کنیم؛
• خط ۱۶: اگر متوجه شویم که routes[i] آخرین صفحه مسیریابی‌شده بوده است، در این صورت صفحه بعدی باید routes[i+1] باشد؛
• خطوط ۱۸–۱۹: اگر این‌طور نباشد، برنامه به routes[i] هدایت می‌شود، یعنی صفحه تغییر نمی‌کند: ناوبری رد می‌شود؛

12.3. Exécution

ما مثال را با استفاده از فایل زیر اجرا می‌کنیم، [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: [
    // سند: 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) {}
  },
  // پوشه کد منبع
  srcDir: 'nuxt-09',
  router: {
    base: '/nuxt-09/',
    middleware: ['client-routing']
  },
  // سرور
  server: {
    port: 81, // پیش‌فرض: 3000
    host: 'localhost' // پیش‌فرض: localhost
  }
}

نکات زیر را بررسی کنید:

• وقتی در صفحه [Home] هستید، فقط می‌توانید به صفحه [Page 1] بروید؛
• وقتی در صفحه [Page 1] هستید، فقط می‌توانید به صفحه [Page 2] بروید؛
• وقتی در صفحه [Page 2] هستید، فقط می‌توانید به صفحه [Home] بروید؛
• اگر یک URL نادرست، مانند [http://localhost:81/nuxt-09b/abcd]، را درخواست کنید، صفحه‌ای را مشاهده خواهید کرد که نشان می‌دهد صفحهٔ درخواست‌شده وجود ندارد؛