Skip to content

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

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

4.1. Projektverzeichnisstruktur

Das [vuejs-11]-Projekt war ein Projekt, bei dem es um die Navigation zwischen Ansichten ging:

Image

Die Verzeichnisstruktur des Quellcodes des [vuejs-11]-Projekts sah wie folgt aus:

Image

  • [main.js] war das Skript, das beim Start der [vue]-Anwendung ausgeführt wurde;
  • [router.js] definierte die Routing-Regeln;
  • [App.vue] war die strukturierende Ansicht der Anwendung. Sie organisierte das Layout der verschiedenen Ansichten;
  • [Komponente1, Komponente2, Komponente3, Layout, Navigation] waren die Komponenten, die in den verschiedenen Ansichten der Anwendung verwendet wurden;

Bei der Portierung der [Vue]-Anwendung [1] auf eine [Nuxt]-Anwendung [2]:

  • müssen Skripte, die beim Start der Anwendung ausgeführt werden, im Schlüssel [plugins] der Datei [nuxt.config.js] deklariert werden. Außerdem ist es möglich, Skripte, die für den [nuxt]-Server bestimmt sind, von denen zu trennen, die für den [nuxt]-Client bestimmt sind;
  • Die Ansicht [App.vue] muss im Ordner [layouts] abgelegt und in [default.vue] umbenannt werden;
  • Die Komponenten [Component1, Component2, Component3], die die Routing-Ziele darstellen, müssen in den Ordner [pages] verschoben werden. Eine davon, die als Startseite dient, muss in [index.vue] umbenannt werden. Hier haben wir die Dateien umbenannt:
    • [Component1] --> [index]: zeigt den Text [Home] an;
    • [Component2] --> [page1]: zeigt den Text [Page 1] an;
    • [Component3] --> [page2]: zeigt den Text [Seite 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’}

Infolgedessen wird die im [vue]-Projekt verwendete Datei [router.js] im [nuxt]-Projekt ü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: [
    // 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-01',
  // router
  router: {
    // application URL root
    base: '/nuxt-01/'
  },
  // server
  server: {
    // service port, default 3000
    port: 81,
    // network addresses listened to, default localhost: 127.0.0.1
    // 0.0.0.0 = all the machine's network addresses
    host: '0.0.0.0'
  }
}
  • Zeile 62: Geben Sie den Ordner an, der den Quellcode des Projekts enthält [dvp];
  • Zeile 66: Geben Sie die Stamm-URL der [dvp]-Anwendung an (Sie können einen beliebigen Wert eingeben);
  • Zeile 43: Beachten Sie, dass in der Konfiguration auf die Bibliothek [bootstrap-vue] verwiesen wird;

4.2. Portierung der Datei [main.js]

Die Datei [main.js] für das Projekt [vuejs-11] sah wie folgt aus:


// imports
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'
 
// routeur
import monRouteur from './router'
 
// configuration
Vue.config.productionTip = false
 
// instanciation projet [App]
new Vue({
  name: "app",
  // vue principale
  render: h => h(App),
  // routeur
  router: monRouteur,
}).$mount('#app')

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

  • Zeilen 5–11: Verwendet die [bootstrap-vue]-Bibliothek. Dies wird nun vom [bootstrap-vue/nuxt]-Modul in Zeile 43 der Konfigurationsdatei [nuxt.config.js] übernommen;
  • Zeilen 14 und 25: Verwendung der Routing-Datei [router.js]. Dies erfolgt nun automatisch durch die [nuxt]-Anwendung auf Basis der Verzeichnisstruktur des Ordners [pages];
  • Zeilen 20–26: Instanziierung der Hauptansicht der Anwendung. In einer [nuxt]-Anwendung dient die Ansicht [layouts/default.vue] als Hauptansicht;

Die Datei [main.js] wird nicht mehr benötigt. Wäre dies der Fall gewesen, hätten wir sie im Schlüssel [plugins] in Zeile 30 der Konfigurationsdatei [nuxt.config.js] deklariert;

4.3. Die Hauptansicht [default.vue]

Image

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


<template>
  <div class="container">
    <b-card>
      <!-- a message -->
      <b-alert show variant="success" align="center">
        <h4>[nuxt-01] : routage et navigation</h4>
      </b-alert>
      <!-- the current routing view -->
      <nuxt />
    </b-card>
  </div>
</template>
 
<script>
export default {
  name: 'App'
}
</script>
  • In Zeile 9 des [vuejs-11]-Projekts hatten wir das <router-view />-Tag anstelle des hier verwendeten <nuxt />-Tags. Beide scheinen zu funktionieren. Ich habe beide ausprobiert, ohne dass sich etwas geändert hätte. Ich habe das <nuxt />-Tag beibehalten, da es das empfohlene ist. Es zeigt die aktuelle Ansicht an, d. h. die Zielseite der aktuellen Route;

4.4. Die Komponenten

Image

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

[components / layout.vue]


<!-- view layout -->
<template>
  <!-- line -->
  <div>
    <b-row>
      <!-- two-column zone -->
      <b-col v-if="left" cols="2">
        <slot name="left" />
      </b-col>
      <!-- ten-column zone -->
      <b-col v-if="right" cols="10">
        <slot name="right" />
      </b-col>
    </b-row>
  </div>
</template>
 
<script>
export default {
  // paramètres
  props: {
    left: {
      type: Boolean
    },
    right: {
      type: Boolean
    }
  }
}
</script>

Diese Komponente wird verwendet, um die Seiten der Anwendung in zwei Spalten zu gliedern:

  • Zeilen 7–9: Die linke Spalte erstreckt sich über 2 Bootstrap-Spalten;
  • Zeilen 11–13: Die rechte Spalte erstreckt sich über 10 Bootstrap-Spalten;

[navigation.vue]


<template>
  <!-- bootstrap menu with three options -->
  <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 festzustellen, welche Werte den [to]-Attributen in den Zeilen 4, 7 und 10 zugewiesen werden sollen, sehen Sie sich den Ordner [pages] [2] an:

  • Die Seite [index] hat die URL [/] ;
  • die Seite [page1] hat die URL [/page1];
  • die Seite [page2] hat die URL [/page2];

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


<template>
  <!-- bootstrap menu with three options -->
  <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 <b-nav-item>-Tag wird durch das <nuxt-link>-Tag ersetzt, das einen Routing-Link bezeichnet. In der Praxis habe ich keinen wesentlichen Unterschied festgestellt – nichts, was den Ausschlag zugunsten des einen Tags gegenüber dem anderen geben würde.

4.5. Die Seiten

Image

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

Image

Der Seitencode lautet wie folgt:


<!-- page principale -->
<template>
  <Layout :left="true" :right="true">
    <!-- navigation -->
    <Navigation slot="left" />
    <!-- message-->
    <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',
  // components used
  components: {
    Layout,
    Navigation
  },
  // life cycle
  beforeCreate(...args) {
    console.log('[home beforeCreate]', 'process.server=', process.server,
 'process.client=', process.client, "nombre d'arguments=", args.length)
  },
  created(...args) {
    console.log('[home created]', 'process.server=', process.server,
 'process.client=', process.client, "nombre d'arguments=", args.length)
  },
  beforeMount(...args) {
    console.log('[home beforeMount]', 'process.server=', process.server,
 'process.client=', process.client, "nombre d'arguments=", args.length)
  },
  mounted(...args) {
    console.log('[home mounted]', 'process.server=', process.server,
 'process.client=', process.client, "nombre d'arguments=", args.length)
  }
}
</script>
  • Zeile 5: Die Navigationskomponente wird in der linken Spalte platziert;
  • Zeilen 7–9: Eine Warnmeldung wird in der rechten Spalte platziert;

Im Abschnitt <script> platzieren wir Code in den Funktionen des Seitenlebenszyklus [beforeCreate, created, beforeMount, beforeMounted]. Wir möchten wissen, welche davon vom Server []nuxt und welche vom Client [nuxt] ausgeführt werden. Erinnern wir uns an zwei Dinge:

  • Wenn eine Seite angefordert wird – entweder beim Start der Anwendung (wie bei der [index]-Seite) oder manuell durch den Benutzer, der die Browser-Seite aktualisiert oder eine URL von Hand eingibt –, wird sie zunächst vom [nuxt]-Server bereitgestellt. Der Server interpretiert den obigen Code und führt das darin enthaltene JavaScript aus;
  • wenn die vom [nuxt]-Server gesendete Seite im Browser ankommt, enthält sie den [nuxt]-Client-Code. Der Client-Code führt dann den obigen Code erneut aus;
  • Wir verwenden Protokolle, um zu verfolgen, wer was tut, um diesen Prozess besser zu verstehen;
  • Zeilen 30–31: Wir verwenden in der Funktion ein globales Objekt [process], das sowohl auf dem Server als auch auf dem Client vorhanden ist:
    • [process.server] ist true, wenn der Code vom Server ausgeführt wird, andernfalls false;
    • [process.client] ist wahr, wenn der Code vom Client ausgeführt wird, andernfalls falsch;
    • Da die Variable [process] im Code nicht deklariert ist, müssen wir Zeile 14 für [eslint] einfügen. Zeile 16 ist notwendig, da [eslint] andernfalls aufgrund der Variable [process] einen anderen Fehlertyp meldet. Zeile 15 ist notwendig, um die Verwendung von [console] in Lebenszyklusfunktionen zu ermöglichen;
  • Zeile 29: Wir möchten auch wissen, ob die Lebenszyklusfunktionen Argumente erhalten. Wir werden tatsächlich feststellen, dass [nuxt] Informationen an bestimmte Funktionen übergibt. 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]

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

4.7. Ausführen des Projekts

Wir führen das Projekt aus:

Image

Die angezeigte Seite sieht wie folgt aus:

Image

Sobald die [nuxt]-Anwendung im Browser geladen ist, wird sie zu einer standardmäßigen [vue]-Anwendung. Wir werden daher nicht auf das clientseitige Verhalten der [nuxt-01]-Anwendung eingehen. Dies wurde bereits im [vuejs-11]-Projekt im Dokument |Einführung in das VUE.JS-Framework anhand von Beispielen| behandelt.

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

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

In beiden Fällen:

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

Sehen wir uns die Startprotokolle der Anwendung an (F12 im Browser):

Image

  • in [1] die Serverprotokolle (process.server=true). Sie erscheinen mit der Kennzeichnung [Nuxt SSR] (SSR = Server Side Rendered);
  • in [2] die Client-Protokolle im Browser (process.client=true);

Aus diesen Protokollen lässt sich ableiten, dass:

  • Der Server führt die Lebenszyklusfunktionen [beforeCreate, created] aus;
  • Der Client führt die Lebenszyklusfunktionen [beforeCreate, created, beforeMount, mounted] aus;
  • Der Server hat die Seite vor dem Client verarbeitet;
  • in beiden Fällen erhält keine der ausgeführten Funktionen Argumente;

Sehen wir uns nun den Quellcode der empfangenen Seite an (die Option [Page Source] 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>

Kommentare

  • Das Erste, was Ihnen vielleicht auffällt, ist, dass der empfangene HTML-Code genau das widerspiegelt, was der Benutzer sieht. Bei [Vue]-Anwendungen war dies nicht der Fall, da der angezeigte Quellcode der Quellcode einer fast leeren HTML-Datei war. Das war das, was der Browser empfangen hatte. Dann übernahm der [Vue]-Client und erstellte die Seite, die der Benutzer erwartete. Man musste dann in den Entwicklertools des Browsers (F12) auf die Registerkarte [Inspector] wechseln, um den HTML-Code der angezeigten Seite anzuzeigen;
  • Zeilen 57–67: Dies ist das Skript, das die mit [Nuxt SSR] gekennzeichneten Protokolle anzeigte. Diese Protokolle wurden auf der Serverseite generiert, und die Ergebnisse wurden in ein Skript eingebettet, das in der gesendeten Seite enthalten war;
  • Zeilen 68–71: die Skripte, die den clientseitigen Code bilden, der im Browser ausgeführt wird;

Die Skripte in den Zeilen 68–71 werden ausgeführt und transformieren die empfangene Seite. Um die Seite zu sehen, die dem Benutzer letztendlich angezeigt wird, wechsle in den Browser-Entwicklertools (F12) zur Registerkarte [Inspector]:

Image

Wenn Sie das <html>-Tag [3] erweitern, sehen Sie 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>

Kommentare

  • Auf den ersten Blick scheint die in den Zeilen 19–59 angezeigte Seite 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]-Elemente;

Zeilen 33, 37 und 42: Die Links sind problematisch. Sie scheinen normale Links zu sein, die beim Anklicken eine Anfrage an den Server senden. Bei der Ausführung stellen wir jedoch fest, dass dies nicht der Fall ist: Es wird keine Anfrage an den Server gesendet. Um zu verstehen, warum das so ist, müssen wir zum [Inspector]-Tab des Browsers zurückkehren:

Image

Wir sehen, dass den Links in [1, 2] Ereignisse zugewiesen wurden. Es sind die Skripte in den Zeilen 71–74, die den Links Ereignisbehandler zugewiesen haben. Daher:

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

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

Image

Wir erhalten dieselben Ergebnisse wie für die [index]-Seite, allerdings für [page1]. Der Quellcode der angezeigten 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>

Wir erhalten denselben Seitentyp wie die [index]-Seite, jedoch mit der [Page 1]-Ansichtsmeldung (Zeile 30). Zeilen 41–44: Der clientseitige Code wurde zusammen mit der Seite gesendet. Letztendlich entspricht das manuelle Aufrufen einer URL einem Neustart der Anwendung. Der einzige Unterschied besteht darin, dass die angezeigte Seite nicht unbedingt die Startseite ist, sondern diejenige, die angefordert wurde. Sobald die Seite empfangen wurde, übernimmt der Client. Der Server wird nicht mehr kontaktiert, 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.