Skip to content

4. Beispiel [nuxt-01]: Routenplanung und Navigation

Wir werden eine Reihe einfacher Beispiele erstellen, um schrittweise die Funktionsweise einer [nuxt]-Anwendung zu entdecken. Wir beginnen damit, die Anwendung [vuejs-11] aus dem Dokument |Einführung in das VUE.JS-Framework anhand eines Beispiels| zu portieren, um zunächst herauszufinden, worin sich die Code-Struktur einer [nuxt]-Anwendung von der einer [vue]-Anwendung unterscheidet.

4.1. Projektstruktur

Das Projekt [vuejs-11] war ein Projekt zur Navigation zwischen Ansichten:

Image

Die Quellcode-Struktur des Projekts [vuejs-11] sah wie folgt aus:

Image

  • [main.js] war das Skript, das beim Start der Anwendung [vue] ausgeführt wurde;
  • [router.js] legte die Routing-Regeln fest;
  • [App.vue] war die strukturierende Ansicht der Anwendung. Sie organisierte das Layout der verschiedenen Ansichten;
  • [Component1, Component2, Component3, Layout, Navigation] waren die in den verschiedenen Ansichten der Anwendung verwendeten Komponenten;

Bei der Portierung der Anwendung [vue] [1] auf eine Anwendung [nuxt] [2]:

  • müssen die beim Start der Anwendung ausgeführten Skripte im Schlüssel [plugins] der Datei [nuxt.config.js] deklariert werden. Außerdem ist es möglich, die für den Server [nuxt] bestimmten Skripte von denen für den Client [nuxt] zu trennen;
  • Die Ansicht [App.vue] muss im Ordner [layouts] installiert und in [default.vue] umbenannt werden;
  • Die Komponenten [Component1, Component2, Component3], die Zielobjekte des Routings sind, müssen in den Ordner [pages] verschoben werden. Eine davon, die als Startseite dient, muss in [index.vue] umbenannt werden. Wir haben hier folgende Dateien umbenannt:
    • [Component1] --> [index]: zeigt den Text „[Home]“ an;
    • [Component2] --> [page1]: zeigt den Text „[Page 1]“ an;
    • [Component3] --> [page2]: Zeigt den Text [Page 2] an;

[nuxt] verwendet den Inhalt des Ordners [pages], um die folgenden Routen dynamisch zu generieren:

1
2
3
{ name :’index’, ‘path’ :’/’}
{ name :’page1’, ‘path’ :’/page1’}
{ name :’page2’, ‘path’ :’/page2’}

Dadurch wird die im Projekt [vue] verwendete Datei [router.js] im Projekt [nuxt] überflüssig.

Die Konfigurationsdatei [nuxt.config.js] sieht dann wie folgt aus:


export default {
  mode: 'universal',
  /*
   ** Headers of the page
   */
  head: {
    title: 'Introduction à [nuxt.js]',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      {
        hid: 'description',
        name: 'description',
        content: 'ssr routing loading asyncdata middleware plugins store'
      }
    ],
    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-01',
  // Router
  router: {
    // Stammverzeichnis der Anwendung
    base: '/nuxt-01/'
  },
  // Server
  server: {
    // Dienstport, standardmäßig 3000
    port: 81,
    // Abgehörte Netzwerkadressen, standardmäßig localhost: 127.0.0.1
    // 0.0.0.0 = alle Netzwerkadressen des Rechners
    host: '0.0.0.0'
  }
}
  • Zeile 62: Hier wird der Ordner angegeben, der den Quellcode des Projekts [dvp] enthält;
  • Zeile 66: Hier wird das Stammverzeichnis der Anwendung [dvp] angegeben (hier kann ein beliebiger Wert eingegeben werden);
  • Zeile 43: Beachten Sie, dass die Bibliothek [bootstrap-vue] in der Konfiguration referenziert wird;

4.2. Portierung der Datei [main.js]

Die Datei [main.js] des Projekts [vuejs-11] sah wie folgt aus:


// Importe
import Vue from 'vue'
import App from './App.vue'

// Plugins
import BootstrapVue from 'bootstrap-vue'
Vue.use(BootstrapVue);

// Bootstrap
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

// Router
import monRouteur from './router'

// Konfiguration
Vue.config.productionTip = false

// Projektinstanziierung [App]
new Vue({
  name: "app",
  // Hauptansicht
  render: h => h(App),
  // Router
  router: monRouteur,
}).$mount('#App')

Abgesehen von [imports] führt der Code Folgendes aus:

  • Zeilen 5–11: Verwendung der Bibliothek [bootstrap-vue]. Diese Aufgabe wird nun vom Modul [bootstrap-vue/nuxt] in Zeile 43 der Konfigurationsdatei [nuxt.config.js] übernommen;
  • Zeilen 14 und 25: Verwendung der Routing-Datei [router.js]. Diese Aufgabe wird nun automatisch von der Anwendung [nuxt] anhand der Ordnerstruktur von [pages] übernommen;
  • Zeilen 20–26: Instanziierung der Hauptansicht der Anwendung. In einer Anwendung [nuxt] dient die Ansicht [layouts/default.vue] als Hauptansicht;

Die Datei [main.js] ist nun überflüssig. Hätte sie einen Zweck gehabt, wäre sie im Schlüssel [plugins] in Zeile 30 der Konfigurationsdatei [nuxt.config.js] deklariert worden;

4.3. Die Hauptansicht [default.vue]

Image

Die Hauptansicht [layouts / default.vue] sieht wie folgt aus:


<template>
  <div class="container">
    <b-card>
      <!-- eine Nachricht -->
      <b-alert show variant="success" align="center">
        <h4>[nuxt-01] : routage et navigation</h4>
      </b-alert>
      <!-- die aktuelle Routing-Ansicht -->
      <nuxt />
    </b-card>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>
  • In Zeile 9 des Projekts [vuejs-11] wurde das Tag <router-view /> anstelle des hier verwendeten Tags <nuxt /> verwendet. Beide scheinen funktionsfähig zu sein. Ich habe beide ausprobiert, ohne dass sich etwas geändert hat. Ich habe das <nuxt />-Tag beibehalten, da es empfohlen wird. Es zeigt die aktuelle Ansicht an, d. h. die Zielseite des aktuellen Routings;

4.4. Die Komponenten

Image

Im Vergleich zum Projekt [vuejs-11] bleiben die Komponenten [layout, navigation] unverändert:

[components / layout.vue]


<!-- Anordnung der Ansichten -->
<template>
  <!-- Zeile -->
  <div>
    <b-row>
      <!-- zweispaltiges Feld -->
      <b-col v-if="left" cols="2">
        <slot name="left" />
      </b-col>
      <!-- Zehnspaltiger Bereich -->
      <b-col v-if="right" cols="10">
        <slot name="right" />
      </b-col>
    </b-row>
  </div>
</template>

<script>
export default {
  // Einstellungen
  props: {
    left: {
      type: Boolean
    },
    right: {
      type: Boolean
    }
  }
}
</script>

Diese Komponente dient dazu, die Seiten der Anwendung in zwei Spalten zu gliedern:

  • Zeilen 7–9: die linke Spalte mit 2 Bootstrap-Spalten;
  • Zeilen 11–13: die rechte Spalte mit 10 Bootstrap-Spalten;

[navigation.vue]


<template>
  <!-- Bootstrap-Menü mit drei Optionen -->
  <b-nav vertical>
    <b-nav-item to="/" exact exact-active-class="active">
      Home
    </b-nav-item>
    <b-nav-item to="/page1" exact exact-active-class="active">
      Page 1
    </b-nav-item>
    <b-nav-item to="/page2" exact exact-active-class="active">
      Page 2
    </b-nav-item>
  </b-nav>
</template>

Diese Komponente zeigt drei Navigationslinks an:

Image

Um zu erfahren, welche Werte für die Attribute [to] in den Zeilen 4, 7 und 10 verwendet werden sollen, muss man den Ordner [pages] [2] betrachten:

  • Die Seite [index] erhält die Werte URL und [/];
  • die Seite [page1] enthält die Seiten URL und [/page1];
  • Die Seite [page2] hat die Seiten URL und [/page2];

Die Komponente [navigation] kann auch wie folgt geschrieben werden:


<template>
  <!-- Bootstrap-Menü mit drei Optionen -->
  <b-nav vertical>
    <nuxt-link to="/" exact exact-active-class="active">
      Home
    </nuxt-link>
    <nuxt-link to="/page1" exact exact-active-class="active">
      Page 1
    </nuxt-link>
    <nuxt-link to="/page2" exact exact-active-class="active">
      Page 2
    </nuxt-link>
  </b-nav>
</template>

Das Tag <b-nav-item> wird durch das Tag <nuxt-link> ersetzt, das einen Routing-Link bezeichnet. Bei der Ausführung habe ich keinen großen Unterschied festgestellt, nichts, was den Ausschlag für das eine oder das andere Tag geben könnte.

4.5. Die Seiten

Image

Die Seite [index.vue] zeigt folgende Ansicht an:

Image

Der Code der Seite lautet wie folgt:


<!-- Hauptseite -->
<template>
  <Layout :left="true" :right="true">
    <!-- Navigation -->
    <Navigation slot="left" />
    <!-- Meldung-->
    <b-alert slot="right" show variant="warning">
      Home
    </b-alert>
  </Layout>
</template>

<script>
/* eslint-disable no-undef */
/* eslint-disable no-console */
/* eslint-disable nuxt/no-env-in-hooks */

import Navigation from '@/components/navigation'
import Layout from '@/components/layout'

export default {
  name: 'Home',
  // verwendete Komponenten
  components: {
    Layout,
    Navigation
  },
  // Lebenszyklus
  beforeCreate(...args) {
    console.log('[home beforeCreate]', 'process.server=', process.server,
'process.client=', process.client, „Anzahl der Argumente=“, args.length)
  },
  created(...args) {
    console.log('[home created]', 'process.server=', process.server,
'process.client=', process.client, „Anzahl der Argumente=“, args.length)
  },
  beforeMount(...args) {
    console.log('[home beforeMount]', 'process.server=', process.server,
'process.client=', process.client, „Anzahl der Argumente=“, args.length)
  },
  mounted(...args) {
    console.log('[home mounted]', 'process.server=', process.server,
'process.client=', process.client, „Anzahl der Argumente=“, args.length)
  }
}
</script>
  • Zeile 5: Die Navigationskomponente wird in der linken Spalte platziert;
  • Zeilen 7–9: In der rechten Spalte wird eine Warnmeldung platziert;

Im Abschnitt <script> fügen wir Code in die Lebenszyklusfunktionen der Seite [beforeCreate, created, beforeMount, beforeMounted] ein. Wir möchten wissen, welche davon vom Server []nuxt und welche vom Client [nuxt] ausgeführt werden. Dabei sind zwei Dinge zu beachten:

  • Wenn eine Seite entweder beim Start der Anwendung wie im Fall der Seite [index], oder manuell durch den Benutzer, der die Seite im Browser aktualisiert oder eine URL von Hand eingibt, wird sie zunächst vom Server [nuxt] bereitgestellt. Dieser interpretiert den oben genannten Code und führt das darin enthaltene JavaScript aus;
  • wenn die vom Server [nuxt] gesendete Seite im Browser eintrifft, enthält sie den Code des Clients [nuxt]. Dieser interpretiert die oben genannte Seite erneut;
  • Anhand von Logs wollen wir herausfinden, wer was tut, um diesen Prozess besser zu verstehen;
  • Zeilen 30–31: In der Funktion wird ein globales Objekt [process] verwendet, das sowohl auf dem Server als auch auf dem Client existiert:
    • [process.server] ist wahr, wenn der Code vom Server ausgeführt wird, andernfalls falsch;
    • [process.client] ist wahr, wenn der Code vom Client ausgeführt wird, andernfalls falsch;
    • Da die Variable [process] im Code nicht deklariert ist, muss die Zeile 14 für [eslint] eingefügt werden. Die Zeile [16] ist erforderlich, da sonst [eslint] aufgrund der Variablen [process] einen anderen Fehlertyp meldet. Ist Zeile 15 erforderlich, um die Verwendung von [console] in den Lebenszyklusfunktionen zu ermöglichen?
  • Zeile 29: Wir möchten außerdem wissen, ob die Lebenszyklusfunktionen Argumente erhalten. Wir werden nämlich feststellen, dass [nuxt] Informationen an bestimmte Funktionen übermittelt. Wir möchten wissen, ob die Lebenszyklusfunktionen dazu gehören;
  • Wir wiederholen denselben Code für alle vier Funktionen;

4.6. Die Datei [nuxt.config.js]

Sie steuert die Ausführung des Projekts [dvp]. Sie wurde auf Seite 33 beschrieben.

4.7. Ausführung des Projekts

Wir führen das Projekt aus:

Image

Es wird folgende Seite angezeigt:

Image

Nach der Installation im Browser wird die Anwendung [nuxt] zu einer klassischen [vue]-Anwendung. Wir werden daher nicht näher auf die clientseitige Funktionsweise der Anwendung [nuxt-01] eingehen. Dies wurde bereits im Projekt [vuejs-11] des Dokuments |Einführung in das VUE.JS-Framework anhand eines Beispiels| behandelt.

Die Anwendung [nuxt] unterscheidet sich von der Anwendung [vue] nur in zwei Punkten:

  • beim ersten Start der Anwendung, bei dem die Startseite angezeigt wird;
  • jedes Mal, wenn der Benutzer auf irgendeine Weise eine Aktualisierung des Browsers auslöst;

In diesen beiden Fällen:

  • wird die angeforderte Seite vom Server bereitgestellt;
  • wird die empfangene Seite vom Client verarbeitet;

Sehen wir uns die Protokolle zum Start der Anwendung an (F12 im Browser):

Image

  • in [1] die Server-Protokolle (process.server=true). Ihnen ist der Vermerk [Nuxt SSR] vorangestellt (SSR= Server Side Rendered);
  • in [2] die Client-Protokolle im Browser (process.client=true);

Aus diesen Protokollen lässt sich ableiten, dass:

  • der Server die Funktionen [beforeCreate, created] des Lebenszyklus ausführt;
  • der Client die Funktionen [beforeCreate, created, beforeMount, mounted] des Lebenszyklus ausführt;
  • der Server die Seite vor dem Client verarbeitet hat;
  • In beiden Fällen erhält keine der ausgeführten Funktionen Argumente;

Sehen wir uns nun den Quellcode der empfangenen Seite an (Option [Code source de la page] im Browser):


<!doctype html>
<html data-n-head-ssr>
<head>
  <title>Introduction à [nuxt.js]</title>
  <meta data-n-head="ssr" charset="utf-8">
  <meta data-n-head="ssr" name="viewport" content="width=device-width, initial-scale=1">
  <meta data-n-head="ssr" data-hid="description" name="description" content="ssr routing loading asyncdata middleware plugins store">
  <link data-n-head="ssr" rel="icon" type="image/x-icon" href="/favicon.ico">
  <base href="/nuxt-01/">
  ....
  <link rel="preload" href="/nuxt-01/_nuxt/runtime.js" as="script">
  <link rel="preload" href="/nuxt-01/_nuxt/commons.app.js" as="script">
  <link rel="preload" href="/nuxt-01/_nuxt/vendors.app.js" as="script">
  <link rel="preload" href="/nuxt-01/_nuxt/app.js" as="script">
</head>
<body>
  <div data-server-rendered="true" id="__nuxt">
    <div id="__layout">
      <div class="container">
        <div class="card">
          <div class="card-body">
            <div role="alert" aria-live="polite" aria-atomic="true" align="center" class="alert alert-success">
              <h4>[nuxt-01] : routage et navigation</h4>
            </div>
            <div>
              <div class="row">
                <div class="col-2">
                  <ul class="nav flex-column">
                    <li class="nav-item">
                      <a href="/nuxt-01/" target="_self" class="nav-link active nuxt-link-active">
                        Home
                      </a>
                    </li>
                    <li class="nav-item">
                      <a href="/nuxt-01/page1" target="_self" class="nav-link">
                        Page 1
                      </a>
                    </li>
                    <li class="nav-item">
                      <a href="/nuxt-01/page2" target="_self" class="nav-link">
                        Page 2
                      </a>
                    </li>
                  </ul>
                </div> <div class="col-10">
                  <div role="alert" aria-live="polite" aria-atomic="true" class="alert alert-warning">
                    Home
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script>
    window.__NUXT__ = (function (a, b, c, d, e, f, g, h, i, j) {
      return {
        layout: "default", data: [{}], error: null, serverRendered: true,
        logs: [
          { date: new Date(1574069600078), args: [a, b, c, d, e, f, g, "(repeated 1 times)"], type: h, level: i, tag: j },
          { date: new Date(1574070938091), args: [a, b, c, d, e, f, g], type: h, level: i, tag: j }
        ]
      }
    }("[home beforeCreate]", "process.server=", "true", "process.client=", "false", "nombre d'arguments=", "0", "log", 2, ""));
  </script>
  <script src="/nuxt-01/_nuxt/runtime.js" defer></script>
  <script src="/nuxt-01/_nuxt/commons.app.js" defer></script>
  <script src="/nuxt-01/_nuxt/vendors.app.js" defer></script>
  <script src="/nuxt-01/_nuxt/app.js" defer></script>
</body>
</html>

Anmerkungen

  • Als Erstes fällt auf, dass der empfangene Code HTML korrekt wiedergibt, was der Benutzer sieht. Dies war bei den Anwendungen [vue] nicht der Fall, bei denen der angezeigte Quellcode der Quellcode einer fast leeren Datei HTML war. Das war es, was der Browser empfangen hatte. Anschließend übernahm der Client [vue] die Kontrolle und erstellte die vom Nutzer erwartete Seite. Man musste dann in den Reiter [inspecteur] der Entwicklertools des Browsers (F12) wechseln, um den Code HTML der angezeigten Seite zu finden;
  • Zeilen 57–67: Dies ist das Skript, das die mit [Nuxt SSR] gekennzeichneten Protokolle angezeigt hat. Diese Protokolle wurden serverseitig erzeugt und die Ergebnisse in ein Skript eingebettet, das in die gesendete Seite eingebunden wurde;
  • Zeilen 68–71: Die Skripte, die den im Browser ausgeführten Client bilden;

Die Skripte in den Zeilen 68–71 werden ausgeführt und wandeln die empfangene Seite um. Um zu erfahren, welche Seite dem Nutzer letztendlich angezeigt wird, muss man in den Entwicklertools des Browsers (F12) auf die Registerkarte „[inspecteur]“ wechseln:

Image

Wenn man das Tag <html> [3] aufklappt, sieht man folgenden Inhalt:


<head>
  <title>Introduction à [nuxt.js]</title>
  <meta data-n-head="ssr" charset="utf-8">
  <meta data-n-head="ssr" name="viewport" content="width=device-width, initial-scale=1">
  <meta data-n-head="ssr" data-hid="description" name="description" content="ssr routing loading asyncdata middleware plugins store">
  <link data-n-head="ssr" rel="icon" type="image/x-icon" href="/favicon.ico">
  <base href="/nuxt-01/">
  ...
  <link rel="preload" href="/nuxt-01/_nuxt/runtime.js" as="script">
  <link rel="preload" href="/nuxt-01/_nuxt/commons.app.js" as="script">
  <link rel="preload" href="/nuxt-01/_nuxt/vendors.app.js" as="script">
  <link rel="preload" href="/nuxt-01/_nuxt/app.js" as="script">

  <script charset="utf-8" src="/nuxt-01/_nuxt/pages_index.js"></script>
  <script charset="utf-8" src="/nuxt-01/_nuxt/pages_page1.js"></script>
  <script charset="utf-8" src="/nuxt-01/_nuxt/pages_page2.js"></script>
</head>
<body>
  <div id="__nuxt">
    <div id="__layout">
      <div class="container">
        <div class="card">
          <div class="card-body">
            <div role="alert" aria-live="polite" aria-atomic="true" class="alert alert-success" align="center">
              <h4>[nuxt-01] : routage et navigation</h4>
            </div>
            <div>
              <div class="row">
                <div class="col-2">
                  <ul class="nav flex-column">
                    <li class="nav-item">
                      <a href="/nuxt-01/" target="_self" class="nav-link active nuxt-link-active">
                        Home
                      </a>
                    </li>
                    <li class="nav-item">
                      <a href="/nuxt-01/page1" target="_self" class="nav-link">
                        Page 1
                      </a>
                    </li>
                    <li class="nav-item">
                      <a href="/nuxt-01/page2" target="_self" class="nav-link">
                        Page 2
                      </a>
                    </li>
                  </ul>
                </div>
                <div class="col-10">
                  <div role="alert" aria-live="polite" aria-atomic="true" class="alert alert-warning">
                    Home
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script>
    window.__NUXT__ = (function (a, b, c, d, e, f, g, h, i) {
      return {
        layout: "default", data: [{}], error: null, serverRendered: true,
        logs: [
          { date: new Date(1574068674481), args: ["[home beforeCreate]", a, b, c, d, e, f], type: g, level: h, tag: i },
          { date: new Date(1574068674482), args: ["[home created]", a, b, c, d, e, f], type: g, level: h, tag: i }
        ]
      }
    }("process.server=", "true", "process.client=", "false", "nombre d'arguments=", "0", "log", 2, ""));
  </script>
  <script src="/nuxt-01/_nuxt/runtime.js" defer=""></script>
  <script src="/nuxt-01/_nuxt/commons.app.js" defer=""></script>
  <script src="/nuxt-01/_nuxt/vendors.app.js" defer=""></script>
  <script src="/nuxt-01/_nuxt/app.js" defer=""></script>

  <iframe id="mc-sidebar-container" ...></iframe>
  <iframe id="mc-topbar-container"...>  </iframe>
  <iframe id="mc-toast-container" ...></iframe>
  <iframe id="mc-download-overlay-container"...></iframe>
</body>

Anmerkungen

  • Auf den ersten Blick scheint die angezeigte Seite (Zeilen 19–59) mit der empfangenen Seite identisch zu sein;
  • Zeilen 14–16: Es erscheinen drei neue Skripte, eines für jede Seite der Anwendung;
  • Zeilen 76–79: Es erscheinen vier „[iframe]“;

In den Zeilen 33, 37 und 42 bereiten die Links Probleme. Sie scheinen normale Links zu sein, die beim Anklicken eine Anfrage an den Server senden. Bei der Ausführung stellt sich jedoch heraus, dass dies nicht der Fall ist: Es erfolgt keine Anfrage an den Server. Um zu verstehen, warum das so ist, muss man zurück zur Registerkarte „[inspecteur]“ im Browser wechseln:

Image

Man sieht, dass in [1, 2] den Links Ereignisse zugewiesen wurden. Es sind die Skripte in den Zeilen 71–74, die den Links Ereignisbehandler zugewiesen haben. Das bedeutet also:

  • Die vom Client angezeigte Seite ist optisch identisch mit der vom Server gesendeten;
  • dem Client wurde der Seite ein dynamisches Verhalten hinzugefügt;

Rufen wir nun die Seite [page1] auf, indem wir die Adresse URL manuell in [http://192.168.1.128:81/nuxt-01/page1] eingeben. Die Protokolle sehen dann wie folgt aus:

Image

Wir erhalten dieselben Ergebnisse wie für die Seite „[index]“, jedoch für „[page1]“. Der Quellcode der empfangenen Seite lautet wie folgt:


<body>
  <div data-server-rendered="true" id="__nuxt">
    <div id="__layout">
      <div class="container">
        <div class="card">
          <div class="card-body">
            <div role="alert" aria-live="polite" aria-atomic="true" align="center" class="alert alert-success"><h4>[nuxt-01] : routage et navigation</h4></div> <div>
              <div class="row">
                <div class="col-2">
                  <ul class="nav flex-column">
                    <li class="nav-item">
                      <a href="/nuxt-01/" target="_self" class="nav-link">
                        Home
                      </a>
                    </li>
                    <li class="nav-item">
                      <a href="/nuxt-01/page1" target="_self" class="nav-link active nuxt-link-active">
                        Page 1
                      </a>
                    </li>
                    <li class="nav-item">
                      <a href="/nuxt-01/page2" target="_self" class="nav-link">
                        Page 2
                      </a>
                    </li>
                  </ul>
                </div> <div class="col-10">
                  <div role="alert" aria-live="polite" aria-atomic="true" class="alert alert-primary">

                    Page 1
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script>window.__NUXT__ = { layout: "default", data: [{}], error: null, serverRendered: true, logs: [{ date: new Date(1573917721122), args: ["[page1 beforeCreate]", "process.server=", "true", "process.client=", "false", "nombre d'arguments=", "0"], type: "log", level: 2, tag: "" }] };</script>
  <script src="/nuxt-01/_nuxt/runtime.js" defer></script>
  <script src="/nuxt-01/_nuxt/commons.app.js" defer></script>
  <script src="/nuxt-01/_nuxt/vendors.app.js" defer></script>
  <script src="/nuxt-01/_nuxt/app.js" defer></script>
</body>

Man erhält denselben Seitentyp wie bei der Seite [index], jedoch mit der Warnmeldung der Ansicht [Page 1] (Zeile 30). In den Zeilen 41–44 wurde der Client-Code zusammen mit der Seite zurückgesendet. Letztendlich entspricht das manuelle Aufrufen einer URL einem Neustart der Anwendung. Allerdings ist die angezeigte Seite nicht unbedingt die Startseite, sondern diejenige, die angefordert wurde. Sobald die Seite empfangen wurde, übernimmt der Client die Kontrolle. Der Server wird nicht mehr angefragt, es sei denn, der Benutzer entscheidet sich anders.

https://stahe.github.io
Dieses Tutorial, verfasst von Serge Tahé, wird der Öffentlichkeit unter den Bedingungen der Creative Commons Namensnennung – Nicht kommerziell – Weitergabe unter gleichen Bedingungen 3.0 Unported.