12. Voorbeeld [nuxt-09]: navigatiecontrole

Het voorbeeld [nuxt-09] maakt gebruik van een middleware om de navigatie van de client te regelen. Daarnaast wordt een nieuwe weergave toegevoegd voor gevallen waarin de gebruiker de server om een URL vraagt die niet in de applicatie bestaat.

Het voorbeeld [nuxt-09] is in eerste instantie verkregen door het voorbeeld [nuxt-01] te kopiëren:

12.1. De pagina [_.vue]

We hebben gezegd dat de routes van de applicatie worden samengesteld op basis van de inhoud van de map [pages]. Hier hebben we de pagina [_.vue] aan deze map toegevoegd. Deze specifieke pagina wordt weergegeven telkens wanneer de applicatie wordt doorgestuurd naar een pagina die niet bestaat. In ons voorbeeld hier kan dit voor de klant niet gebeuren. Maar het kan wel gebeuren voor de server als er bijvoorbeeld om de pagina URL wordt gevraagd in plaats van [/nuxt-09/abcd]. Aangezien de pagina [abcd] niet bestaat, wordt de pagina [_.vue] weergegeven. In dit geval is dat de volgende:

De code van de pagina [_.vue] is als volgt:


<!-- definitie HTML van de weergave -->
<template>
  <!-- pagina-indeling -->
  <Layout :left="true" :right="true">
    <!-- waarschuwing in de rechterkolom -->
    <template slot="right">
      <!-- bericht op gele achtergrond -->
      <b-alert show variant="warning" align="center">
        <h4>La page demandée n'existe pas</h4>
      </b-alert>
    </template>
    <!-- navigatiemenu in de linkerkolom -->
    <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',
  // gebruikte componenten
  components: {
    Layout,
    Navigation
  },
  // levenscyclus
  beforeCreate() {
    // client en server
    console.log('[404 beforeCreate]')
  },
  created() {
    // client en server
    console.log('[404 created]')
  },
  beforeMount() {
    // alleen client
    console.log('[404 beforeMount]')
  },
  mounted() {
    // alleen client
    console.log('[404 mounted]')
  }
}
</script>

12.2. De client-middleware

De code van de client-middleware [client-routing] is als volgt:


/* eslint-disable no-undef */
/* eslint-disable no-console */
export default function({ route, from, redirect }) {
  // alleen de client
  if (process.client) {
    console.log('[client-routing]')
    // gewenste navigatievolgorde
    const routes = ['index', 'page1', 'page2', 'index']
    // huidige route
    const current = route.name
    // vorige route
    const previous = from.name
    // we willen een cirkelvormige navigatie
    // routes[i] naar routes[i+1]
    for (let i = 0; i < routes.length - 1; i++) {
      if (previous === routes[i] && current !== routes[i + 1]) {
        // we blijven op dezelfde pagina
        redirect({ name: routes[i] })
        return
      }
    }
  }
}

regel 3: we weten dat de routeringsfunctie slechts één parameter ontvangt, namelijk het object [context] van degene die de functie uitvoert, de server of de client. De notatie [function({ route, from, redirect })]
- is gelijk aan [function({ route:route, from:from, redirect:redirect })];
- waardoor { route:route, from:from, redirect:redirect } <-- context;
- waardoor drie [route, from, redirect]-parameters worden aangemaakt, namelijk:
  - route=context.route;
  - redirect=context.redirect;
  - from=context.from;

De documentatie van [nuxt] maakt veelvuldig gebruik van deze notatie. Het is belangrijk deze te kennen;

regel 8: een tabel met paginanamen in de gewenste navigatievolgorde
regel 10: de naam van de bestemmingspagina van de huidige route;
regel 12: de naam van de vorige pagina van de huidige route;
regel 14: als oefening laten we alleen een circulaire navigatie toe [index --> page1 --> page2 --> index];
regels 15-21: we doorlopen de tabel met de gewenste navigatievolgorde;
regel 16: als blijkt dat routes[i] de laatst gerouteerde pagina was, dan moet de volgende routes[i+1] zijn;
regels 18-19: als dat niet het geval is, wordt de applicatie doorgestuurd naar routes[i], d.w.z. dat er niet van pagina wordt gewisseld: de navigatie wordt geweigerd;

12.3. Exécution

We voeren het voorbeeld uit met het volgende bestand [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) {}
  },
  // broncodemap
  srcDir: 'nuxt-09',
  router: {
    base: '/nuxt-09/',
    middleware: ['client-routing']
  },
  // server
  server: {
    port: 81, // standaard: 3000
    host: 'localhost' // standaard: localhost
  }
}

Controleer de volgende punten:

wanneer u zich op de pagina [Home] bevindt, kunt u alleen naar de pagina [Page 1] navigeren;
wanneer u zich op de pagina [Page 1] bevindt, kunt u alleen doorklikken naar de pagina [Page 2];
wanneer je op de pagina [Page 2] bent, kun je alleen naar de pagina [Home] navigeren;
wanneer u een onjuiste URL opvraagt, zoals [http://localhost:81/nuxt-09b/abcd], krijgt u een melding te zien dat de opgevraagde pagina niet bestaat;