12. Przykład [nuxt-09]: kontrola nawigacji

Przykład [nuxt-09] wykorzystuje moduł pośredniczący do kontroli nawigacji klienta. Ponadto dodano nowy widok na wypadek, gdyby użytkownik zażądał od serwera strony URL, która nie istnieje w aplikacji.

Przykład [nuxt-09] uzyskano początkowo poprzez skopiowanie przykładu [nuxt-01]:

12.1. Strona [_.vue]

Wspomnieliśmy, że ścieżki aplikacji są tworzone na podstawie zawartości folderu [pages]. W tym przypadku dodaliśmy do tego folderu stronę [_.vue]. Ta konkretna strona jest wyświetlana za każdym razem, gdy aplikacja próbuje przejść do strony, która nie istnieje. W naszym przykładzie nie może to mieć miejsca w przypadku klienta. Może się to jednak zdarzyć w przypadku serwera, jeśli na przykład zostanie wysłane żądanie dotyczące strony URL lub [/nuxt-09/abcd]. Ponieważ strona [abcd] nie istnieje, wyświetlona zostanie strona [_.vue]. W tym przypadku będzie to następująca strona:

Kod strony [_.vue] jest następujący:

<!-- definicja widoku HTML -->
<template>
  <!-- układ strony -->
  <Layout :left="true" :right="true">
    <!-- alert w prawej kolumnie -->
    <template slot="right">
      <!-- komunikat na żółtym tle -->
      <b-alert show variant="warning" align="center">
        <h4>La page demandée n'existe pas</h4>
      </b-alert>
    </template>
    <!-- menu nawigacyjne w lewej kolumnie -->
    <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',
  // używane komponenty
  components: {
    Layout,
    Navigation
  },
  // cykl życia
  beforeCreate() {
    // klient i serwer
    console.log('[404 beforeCreate]')
  },
  created() {
    // klient i serwer
    console.log('[404 created]')
  },
  beforeMount() {
    // tylko klient
    console.log('[404 beforeMount]')
  },
  mounted() {
    // tylko klient
    console.log('[404 mounted]')
  }
}
</script>

12.2. Oprogramowanie pośredniczące po stronie klienta

Kod oprogramowania pośredniczącego klienta [client-routing] jest następujący:

/* eslint-disable no-undef */
/* eslint-disable no-console */
export default function({ route, from, redirect }) {
  // tylko klient
  if (process.client) {
    console.log('[client-routing]')
    // pożądana kolejność nawigacji
    const routes = ['index', 'page1', 'page2', 'index']
    // aktualna trasa
    const current = route.name
    // poprzednia trasa
    const previous = from.name
    // chcemy nawigacji cyklicznej
    // trasy[i] do tras[i+1]
    for (let i = 0; i < routes.length - 1; i++) {
      if (previous === routes[i] && current !== routes[i + 1]) {
        // pozostajemy na tej samej stronie
        redirect({ name: routes[i] })
        return
      }
    }
  }
}

• wiersz 3: wiemy, że funkcja routingu otrzymuje tylko jeden parametr – obiekt [context] od podmiotu, który ją uruchamia, czy to serwera, czy klienta. Notacja [function({ route, from, redirect })]
  • jest równoważna [function({ route:route, from:from, redirect:redirect })];
  • co powoduje, że { route:route, from:from, redirect:redirect } <-- context;
  • co tworzy trzy parametry [route, from, redirect] o następującej postaci:
    • route=context.route;
    • redirect=context.redirect;
    • from=context.from;

Dokumentacja funkcji [nuxt] szeroko wykorzystuje tę notację. Należy ją znać;

• wiersz 8: tablica nazw stron w pożądanej kolejności nawigacji
• wiersz 10: nazwa strony docelowej bieżącego przekierowania;
• wiersz 12: nazwa poprzedniej strony bieżącego przekierowania;
• wiersz 14: w ramach ćwiczenia zezwolimy wyłącznie na nawigację cykliczną [index --> page1 --> page2 --> index];
• wiersze 15–21: przeglądamy tablicę zawierającą pożądaną kolejność nawigacji;
• wiersz 16: jeśli okaże się, że routes[i] była ostatnią przekierowaną stroną, to następną musi być routes[i+1];
• wiersze 18–19: jeśli tak nie jest, przekierowujemy aplikację do strony routes[i], tzn. nie zmieniamy strony: odrzucamy nawigację;

12.3. Exécution

Przykład uruchamiamy przy użyciu następującego pliku [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: [
    // Dokumentacja: https://github.com/nuxt-community/eslint-module
    '@nuxtjs/eslint-module'
  ],
  /*
   ** Nuxt.js modules
   */
  modules: [
    // Dokumentacja: https://bootstrap-vue.js.org
    'bootstrap-vue/nuxt',
    // Dokumentacja: 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) {}
  },
  // katalog kodu źródłowego
  srcDir: 'nuxt-09',
  router: {
    base: '/nuxt-09/',
    middleware: ['client-routing']
  },
  // serwer
  server: {
    port: 81, // domyślnie: 3000
    host: 'localhost' // domyślnie: localhost
  }
}

Sprawdź następujące kwestie:

• gdy znajdujesz się na stronie [Home], możesz przejść tylko do strony [Page 1];
• gdy znajdujesz się na stronie [Page 1], możesz przejść wyłącznie do strony [Page 2];
• gdy znajdujesz się na stronie [Page 2], możesz przejść tylko do strony [Home];
• gdy żądają Państwo nieprawidłowego adresu URL, np. [http://localhost:81/nuxt-09b/abcd], wyświetla się komunikat informujący, że żądana strona nie istnieje;