12. Beispiel [nuxt-09]: Steuerung der Navigation

Beispiel [nuxt-09] verwendet eine Middleware zur Steuerung der Client-Navigation. Zusätzlich wird eine neue Ansicht für Fälle hinzugefügt, in denen der Benutzer eine URL vom Server anfordert, die in der Anwendung nicht existiert.

Beispiel [nuxt-09] wird zunächst durch Kopieren von Beispiel [nuxt-01] erstellt:

12.1. Die Seite [_.vue]

Wir haben erwähnt, dass die Routen der Anwendung aus den Inhalten des Ordners [pages] aufgebaut werden. Hier haben wir die Seite [_.vue] zu diesem Ordner hinzugefügt. Diese spezielle Seite wird immer dann angezeigt, wenn die Anwendung zu einer Seite weitergeleitet wird, die nicht existiert. In unserem Beispiel hier kann dies für den Client nicht passieren. Für den Server kann es jedoch passieren, wenn beispielsweise die URL [/nuxt-09/abcd] angefordert wird. Da die Seite [abcd] nicht existiert, wird die Seite [_.vue] angezeigt. Hier sieht das wie folgt aus:

Der Code für die Seite [_.vue] lautet wie folgt:

<!-- 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. Die Client-Middleware

Der Code für die Client-Middleware [client-routing] lautet wie folgt:

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

• Zeile 3: Wir wissen, dass die Routing-Funktion nur einen Parameter akzeptiert, nämlich das [context]-Objekt der Entität, die sie ausführt, sei es der Server oder der Client. Die Notation [function({ route, from, redirect })]
  • entspricht [function({ route:route, from:from, redirect:redirect })];
  • was bedeutet, dass { route:route, from:from, redirect:redirect } <-- context;
  • was drei Parameter [route, from, redirect] erzeugt, wie zum Beispiel:
    • route=context.route;
    • redirect=context.redirect;
    • from=context.from;

Die [nuxt]-Dokumentation verwendet diese Notation ausgiebig. Es ist wichtig, sich damit vertraut zu machen;

• Zeile 8: ein Array mit Seitennamen in der gewünschten Navigationsreihenfolge
• Zeile 10: der Name der Zielseite für die aktuelle Route;
• Zeile 12: der Name der vorherigen Seite im aktuellen Routing;
• Zeile 14: Als Übung lassen wir nur zirkuläre Navigation zu [index --> Seite1 --> Seite2 --> index];
• Zeilen 15–21: Wir durchlaufen das Array, um die gewünschte Navigationsreihenfolge zu ermitteln;
• Zeile 16: Wenn wir feststellen, dass routes[i] die zuletzt aufgerufene Seite war, muss die nächste Seite routes[i+1] sein;
• Zeilen 18–19: Ist dies nicht der Fall, leiten wir die Anwendung zu routes[i] weiter, d. h., wir wechseln nicht die Seite: Wir lehnen die Navigation ab;

12.3. Ausführung

Wir führen das Beispiel mit der folgenden [nuxt.config.js]-Datei aus:

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

Überprüfen Sie Folgendes:

• Wenn Sie sich auf der Seite [Startseite] befinden, können Sie nur zur Seite [Seite 1] navigieren;
• Wenn Sie sich auf der Seite [Seite 1] befinden, können Sie nur zur Seite [Seite 2] navigieren;
• Wenn Sie sich auf der Seite [Seite 2] befinden, können Sie nur zur Seite [Startseite] navigieren;
• Wenn Sie eine ungültige URL wie [http://localhost:81/nuxt-09b/abcd] aufrufen, erhalten Sie eine Meldung, dass die angeforderte Seite nicht existiert;