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
      }
    }
  }
}

• рядок 3: ми знаємо, що функція маршрутизації отримує лише один параметр — об’єкт [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] ця нотація використовується дуже часто. Її необхідно знати;

• рядок 8: масив імен сторінок у бажаному порядку навігації
• рядок 10: назва сторінки призначення поточного маршруту;
• рядок 12: назва попередньої сторінки поточного маршруту;
• рядок 14: як вправу, ми дозволимо лише циклічну навігацію [index --> page1 --> page2 --> index];
• рядки 15–21: пробігаємо масив, що задає бажаний порядок навігації;
• рядок 16: якщо виявляється, що routes[i] була останньою сторінкою маршрутизації, то наступною має бути routes[i+1];
• рядки 18–19: якщо це не так, додаток перенаправляється на 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: [
    // Документація: https://bootstrap-vue.js.org
    'bootstrap-vue/nuxt',
    // Документація: 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], то ви отримаєте повідомлення про те, що запитувана сторінка не існує;