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

Das Beispiel [nuxt-09] verwendet eine Middleware zur Steuerung der Navigation des Clients. Außerdem wird eine neue Ansicht für den Fall hinzugefügt, dass der Benutzer eine URL vom Server anfordert, die in der Anwendung nicht existiert.

Das Beispiel [nuxt-09] wird zunächst durch Kopieren des Beispiels [nuxt-01] erstellt:

12.1. Die Seite [_.vue]

Wir haben erwähnt, dass die Routen der Anwendung auf der Grundlage des Inhalts des Ordners „[pages]“ erstellt wurden. Hier haben wir diesem Ordner die Seite „[_.vue]“ hinzugefügt. Diese spezielle Seite wird jedes Mal angezeigt, wenn die Anwendung auf eine Seite weitergeleitet wird, die nicht existiert. In unserem Beispiel hier kann dies für den Client nicht passieren. Für den Server kann dies jedoch der Fall sein, wenn beispielsweise die Seite URL oder [/nuxt-09/abcd] angefordert wird. Da die Seite [abcd] nicht existiert, wird stattdessen die Seite [_.vue] angezeigt. In diesem Fall ist das die folgende:

Der Code der Seite [_.vue] lautet wie folgt:


<!-- Definition HTML der Ansicht -->
<template>
  <!-- Layout -->
  <Layout :left="true" :right="true">
    <!-- Warnung in der rechten Spalte -->
    <template slot="right">
      <!-- Meldung auf gelbem Hintergrund -->
      <b-alert show variant="warning" align="center">
        <h4>La page demandée n'existe pas</h4>
      </b-alert>
    </template>
    <!-- Navigationsmenü in der linken Spalte -->
    <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',
  // verwendete Komponenten
  components: {
    Layout,
    Navigation
  },
  // Lebenszyklus
  beforeCreate() {
    // Client und Server
    console.log('[404 beforeCreate]')
  },
  created() {
    // Client und Server
    console.log('[404 created]')
  },
  beforeMount() {
    // nur Client
    console.log('[404 beforeMount]')
  },
  mounted() {
    // nur Client
    console.log('[404 mounted]')
  }
}
</script>

12.2. Die Client-Middleware

Der Code der Client-Middleware [client-routing] lautet wie folgt:


/* eslint-disable no-undef */
/* eslint-disable no-console */
export default function({ route, from, redirect }) {
  // nur Client
  if (process.client) {
    console.log('[client-routing]')
    // gewünschte Navigationsreihenfolge
    const routes = ['index', 'page1', 'page2', 'index']
    // aktuelle Route
    const current = route.name
    // vorherige Route
    const previous = from.name
    // Wir möchten eine zirkuläre Navigation
    // Routen[i] zu Routen[i+1]
    for (let i = 0; i < routes.length - 1; i++) {
      if (previous === routes[i] && current !== routes[i + 1]) {
        // man bleibt auf derselben Seite
        redirect({ name: routes[i] })
        return
      }
    }
  }
}

Zeile 3: Wir wissen, dass die Routing-Funktion nur einen Parameter erhält, nämlich das Objekt [context] desjenigen, der sie ausführt – Server oder Client. Die Notation [function({ route, from, redirect })]
- entspricht [function({ route:route, from:from, redirect:redirect })];
- was dazu führt, dass { route:route, from:from, redirect:redirect } <-- context;
- wodurch drei Parameter [route, from, redirect] wie folgt erstellt werden:
  - route=context.route;
  - redirect=context.redirect;
  - from=context.from;

Die Dokumentation zu [nuxt] verwendet diese Notation häufig. Man muss sie kennen;

Zeile 8: ein Array mit den Seitennamen in der gewünschten Navigationsreihenfolge
Zeile 10: der Name der Zielseite der aktuellen Weiterleitung;
Zeile 12: der Name der vorherigen Seite der aktuellen Navigation;
Zeile 14: Als Übung lassen wir nur eine zirkuläre Navigation zu: [index --> page1 --> page2 --> index];
Zeilen 15–21: Wir durchlaufen das Array, das die gewünschte Navigationsreihenfolge angibt;
Zeile 16: Wenn festgestellt wird, dass „routes[i]“ die zuletzt geroutete Seite war, muss die nächste Seite „routes[i+1]“ sein;
Zeilen 18–19: Ist dies nicht der Fall, wird die Anwendung zu „routes[i]“ weitergeleitet, d. h., es erfolgt kein Seitenwechsel: Die Navigation wird abgelehnt;

12.3. Exécution

Das Beispiel wird mit der folgenden Datei „[nuxt.config.js]“ ausgeführt:


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: [
    // Dok.: https://github.com/nuxt-community/eslint-module
    '@nuxtjs/eslint-module'
  ],
  /*
   ** Nuxt.js modules
   */
  modules: [
    // Dok.: https://bootstrap-vue.js.org
    'bootstrap-vue/nuxt',
    // Dok.: 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) {}
  },
  // Quellcode-Verzeichnis
  srcDir: 'nuxt-09',
  router: {
    base: '/nuxt-09/',
    middleware: ['client-routing']
  },
  // Server
  server: {
    port: 81, // Standard: 3000
    host: 'localhost' // Standard: localhost
  }
}

Überprüfen Sie folgende Punkte:

Wenn Sie sich auf der Seite [Home] befinden, können Sie nur zur Seite [Page 1] navigieren;
Wenn Sie sich auf der Seite „[Page 1]“ befinden, können Sie nur zur Seite „[Page 2]“ navigieren;
Wenn Sie sich auf der Seite [Page 2] befinden, können Sie nur zur Seite [Home] navigieren;
Wenn Sie eine falsche URL-Seite wie beispielsweise [http://localhost:81/nuxt-09b/abcd] aufrufen, erhalten Sie eine Meldung, dass die angeforderte Seite nicht existiert;