12. Esempio [nuxt-09]: controllo della navigazione

L’esempio [nuxt-09] utilizza un middleware per controllare la navigazione del client. Inoltre, viene aggiunta una nuova vista per i casi in cui l’utente richieda al server una URL che non esiste nell’applicazione.

L’esempio [nuxt-09] è stato inizialmente ottenuto copiando l’esempio [nuxt-01]:

12.1. La pagina [_.vue]

Abbiamo detto che i percorsi dell’applicazione vengono generati a partire dal contenuto della cartella [pages]. In questo caso, abbiamo aggiunto in tale cartella la pagina [_.vue]. Questa pagina specifica viene visualizzata ogni volta che l’applicazione viene indirizzata verso una pagina che non esiste. Nel nostro esempio, ciò non può verificarsi per il client. Tuttavia, può verificarsi per il server se, ad esempio, gli viene richiesta la pagina URL [/nuxt-09/abcd]. Poiché la pagina [abcd] non esiste, verrà visualizzata la pagina [_.vue]. In questo caso, sarà la seguente:

Il codice della pagina [_.vue] è il seguente:

<!-- definizione HTML della vista -->
<template>
  <!-- impaginazione -->
  <Layout :left="true" :right="true">
    <!-- avviso nella colonna di destra -->
    <template slot="right">
      <!-- messaggio su sfondo giallo -->
      <b-alert show variant="warning" align="center">
        <h4>La page demandée n'existe pas</h4>
      </b-alert>
    </template>
    <!-- menu di navigazione nella colonna di sinistra -->
    <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',
  // componenti utilizzati
  components: {
    Layout,
    Navigation
  },
  // ciclo di vita
  beforeCreate() {
    // client e server
    console.log('[404 beforeCreate]')
  },
  created() {
    // client e server
    console.log('[404 created]')
  },
  beforeMount() {
    // solo client
    console.log('[404 beforeMount]')
  },
  mounted() {
    // solo client
    console.log('[404 mounted]')
  }
}
</script>

12.2. Il middleware del client

Il codice del middleware del client [client-routing] è il seguente:

/* eslint-disable no-undef */
/* eslint-disable no-console */
export default function({ route, from, redirect }) {
  // solo client
  if (process.client) {
    console.log('[client-routing]')
    // ordine di navigazione desiderato
    const routes = ['index', 'page1', 'page2', 'index']
    // percorso attuale
    const current = route.name
    // percorso precedente
    const previous = from.name
    // si desidera una navigazione circolare
    // percorsi[i] verso percorsi[i+1]
    for (let i = 0; i < routes.length - 1; i++) {
      if (previous === routes[i] && current !== routes[i + 1]) {
        // si rimane sulla stessa pagina
        redirect({ name: routes[i] })
        return
      }
    }
  }
}

• riga 3: sappiamo che la funzione di routing riceve un solo parametro, l'oggetto [context] di chi la esegue, sia esso il server o il client. La notazione [function({ route, from, redirect })]
  • è equivalente a [function({ route:route, from:from, redirect:redirect })];
  • il che fa sì che { route:route, from:from, redirect:redirect } <-- contesto;
  • il che crea tre parametri [route, from, redirect] come:
    • route=context.route;
    • redirect=context.redirect;
    • from=context.from;

La documentazione di [nuxt] utilizza ampiamente questa notazione. È necessario conoscerla;

• riga 8: un array dei nomi delle pagine nell’ordine di navigazione desiderato
• riga 10: il nome della pagina di destinazione del percorso corrente;
• riga 12: il nome della pagina precedente del percorso corrente;
• riga 14: come esercizio, consentiremo solo una navigazione circolare [index --> page1 --> page2 --> index];
• righe 15-21: si percorre l’array che indica l’ordine di navigazione desiderato;
• riga 16: se si scopre che routes[i] era l’ultima pagina instradata, allora la successiva deve essere routes[i+1];
• righe 18-19: se non è così, si reindirizza l’applicazione a routes[i], ovvero non si cambia pagina: si rifiuta la navigazione;

12.3. Exécution

Si esegue l’esempio con il seguente file [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) {}
  },
  // directory del codice sorgente
  srcDir: 'nuxt-09',
  router: {
    base: '/nuxt-09/',
    middleware: ['client-routing']
  },
  // server
  server: {
    port: 81, // impostazione predefinita: 3000
    host: 'localhost' // impostazione predefinita: localhost
  }
}

Verificate i seguenti punti:

• quando ci si trova sulla pagina [Home], è possibile navigare solo verso la pagina [Page 1];
• quando ci si trova sulla pagina [Page 1], è possibile navigare solo verso la pagina [Page 2];
• quando ci si trova sulla pagina [Page 2], è possibile navigare solo verso la pagina [Home];
• quando si richiede una URL errata, ad esempio [http://localhost:81/nuxt-09b/abcd], viene visualizzata una pagina che indica che la pagina richiesta non esiste;