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 un URL che non esiste nell'applicazione.

L'esempio [nuxt-09] viene inizialmente creato copiando l'esempio [nuxt-01]:

12.1. La pagina [_.vue]

Abbiamo accennato al fatto che i percorsi dell'applicazione sono costruiti a partire dal contenuto della cartella [pages]. Qui, abbiamo aggiunto la pagina [_.vue] a questa cartella. Questa pagina specifica viene visualizzata ogni volta che l'applicazione viene indirizzata verso una pagina che non esiste. Nel nostro esempio, ciò non può accadere per il client. Ma può accadere per il server se, ad esempio, viene richiesto l'URL [/nuxt-09/abcd]. Poiché la pagina [abcd] non esiste, verrà visualizzata la pagina [_.vue]. In questo caso, apparirà così:

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

<!-- 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. Il middleware client

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

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

• Riga 3: Sappiamo che la funzione di routing accetta un solo parametro, l'oggetto [context] dell'entità che la esegue, sia essa il server o il client. La notazione [function({ route, from, redirect })]
  • è equivalente a [function({ route:route, from:from, redirect:redirect })];
  • il che significa 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 [nuxt] fa ampio uso di questa notazione. È importante acquisirne familiarità;

• riga 8: un array di nomi di pagine nell'ordine di navigazione desiderato
• riga 10: il nome della pagina di destinazione per il percorso corrente;
• riga 12: il nome della pagina precedente nel percorso corrente;
• Riga 14: come esercizio, consentiremo solo la navigazione circolare [index --> page1 --> page2 --> index];
• righe 15–21: iteriamo attraverso l'array per determinare l'ordine di navigazione desiderato;
• riga 16: se scopriamo che routes[i] era l'ultima pagina visitata, allora la successiva deve essere routes[i+1];
• righe 18–19: se non è così, reindirizziamo l'applicazione a routes[i], cioè non cambiamo pagina: rifiutiamo la navigazione;

12.3. Esecuzione

Eseguiamo 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) {}
  },
  // source code directory
  srcDir: 'nuxt-09',
  router: {
    base: '/nuxt-09/',
    middleware: ['client-routing']
  },
  // server
  server: {
    port: 81, // default: 3000
    host: 'localhost' // default: localhost
  }
}

Controlla quanto segue:

• quando ti trovi nella pagina [Home], puoi navigare solo alla pagina [Pagina 1];
• quando ti trovi nella pagina [Pagina 1], puoi navigare solo verso la pagina [Pagina 2];
• quando ci si trova nella pagina [Pagina 2], è possibile navigare solo verso la pagina [Home];
• Quando richiedi un URL non valido come [http://localhost:81/nuxt-09b/abcd], ottieni una schermata che indica che la pagina richiesta non esiste;