Skip to content

13. [vuejs-11]-Projekt: Routing und Navigation

Routing ermöglicht es Benutzern, zwischen den verschiedenen Seiten der Anwendung zu navigieren.

Die Verzeichnisstruktur des Projekts sieht wie folgt aus:

Image

13.1. Installation der Abhängigkeiten

Für das Routing in [Vue.js] ist die Abhängigkeit [vue-router] erforderlich:

Image

  • In [1-3] installieren wir die Abhängigkeit [vue-router];
  • In [4-6] wurde nach der Installation der Abhängigkeit die Datei [package.json] geändert;

13.2. Das Routing-Skript [router.js]

Die Navigationsregeln der Anwendung sind in der Datei [router.js] definiert (der Skriptname kann beliebig gewählt werden):


// imports nécessaires au routage
import Vue from 'vue'
import VueRouter from 'vue-router'
 
// plugin de routage
Vue.use(VueRouter)
 
// les composants cibles du routage
import Component1 from './components/Component1.vue'
import Component2 from './components/Component2.vue'
import Component3 from './components/Component3.vue'
 
 
// les routes de l'application
const routes = [
  // home
  { path: '/', name: 'home', component: Component1 },
  // Component1
  {
    path: '/vue1', name: 'vue1', component: Component1
  },
  {
    // Component2
    path: '/vue2', name: 'vue2', component: Component2
  },
  // Component3
  {
    path: '/vue3', name: 'vue3', component: Component3
  },
]
 
// le routeur
const router = new VueRouter({
  routes,
  mode: 'history',
})
 
// export du routeur
export default router

Kommentare

  • Das Skript [router.js] definiert die Routing-Regeln für unsere Anwendung;
  • Zeilen 1–6: Aktivierung des für das Routing erforderlichen [vue-router]-Plugins. Dazu müssen die [Vue]-Klasse/-Funktion (Zeile 2) und das Routing-Plugin (Zeile 3) importiert werden. Dieses Plugin wurde mit der soeben installierten [router]-Abhängigkeit installiert;
  • Zeilen 8–11: Importieren der Zielansichten für das Routing;
  • Zeilen 15–21: Definition des Routen-Arrays. Jedes Element dieses Arrays ist ein Objekt mit den folgenden Eigenschaften:
    • [path]: Die URL der Ansicht, die im [URL]-Feld des Browsers angezeigt werden soll. Hier können Sie beliebige Angaben machen;
    • [name]: der Name der Route. Auch hier können Sie beliebige Angaben machen;
    • [component]: die Komponente, die die Ansicht anzeigt. Dies muss eine vorhandene Komponente sein;

Wir haben hier also vier Routen: [/], /view1, /view2, /view3.

  • Zeilen 33–36: Der Router ist eine Instanz der Klasse [VueRouter], die in Zeile 3 importiert wurde. Der Konstruktor [VueRouter] wird hier mit zwei Parametern verwendet:
    • die Routen der Anwendung;
    • ein Modus zum Schreiben von URLs im Browser: Der Standardmodus [hash] schreibt URLs in der Form [localhost:8080/#/view1] (wobei # das Hash-Zeichen ist). Der Modus [history] entfernt das # [localhost:8080/view1];
  • Zeile 39: Exportiere den Router;

13.3. Das Hauptskript [main.js]

Das Hauptskript [main.js] lautet wie folgt:


// 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')

Kommentare

  • Zeile 14: Wir importieren den vom Skript [router.js] exportierten Router;
  • Zeile 25: Dieser Router wird als Parameter an den Konstruktor der [View]-Klasse übergeben, der die Hauptansicht [App] anzeigt, die mit der [router]-Eigenschaft der Ansicht verknüpft ist;

13.4. Die Hauptansicht [App]

Der Code für die Hauptansicht lautet wie folgt:


<template>
  <div class="container">
    <b-card>
      <!-- a message -->
      <b-alert show variant="success" align="center">
        <h4>[vuejs-11] : routage et navigation</h4>
      </b-alert>
      <!-- the current routing view -->
      <router-view />
    </b-card>
  </div>
</template>
 
<script>
  export default {
    name: "app"
  };
</script>

Kommentare

  • Zeile 9: Zeigt die aktuelle Ansicht im Router an. Das <router-view>-Tag wird nur erkannt, wenn die [router]-Eigenschaft der Ansicht initialisiert wurde;

13.5. Ansichtslayout

Das Ansichtslayout wird von der folgenden [Layout]-Komponente verwaltet:


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

Wir haben dieses Layout bereits im Projekt [vuejs-06] im Abschnitt [vuejs-06] verwendet und erläutert.

13.6. Die Navigationskomponente

Die [Navigation]-Komponente stellt dem Benutzer ein Navigationsmenü zur Verfügung:

Image

Die Komponente, die Block [1] generiert, sieht wie folgt aus:


<template>
  <!-- bootstrap menu with three options -->
  <b-nav vertical>
    <b-nav-item to="/vue1" exact exact-active-class="active">Vue 1</b-nav-item>
    <b-nav-item to="/vue2" exact exact-active-class="active">Vue 2</b-nav-item>
    <b-nav-item to="/vue3" exact exact-active-class="active">Vue 3</b-nav-item>
  </b-nav>
</template>
  • Dieser Code generiert den ersten von drei Navigationslinks;
  • das [to]-Attribut der <b-nav-item>-Tags muss mit einer der [path]-Eigenschaften der Routen des Anwendungsrouters übereinstimmen;

13.7. Die Ansichten

Ansicht Nr. 1 sieht wie folgt aus:

Image

Die Bereiche [3-4] werden durch die folgende [Component1]-Komponente generiert:


<template>
  <Layout :left="true" :right="true">
    <!-- navigation -->
    <Navigation slot="left" />
    <!-- message-->
    <b-alert show variant="primary" slot="right">Vue 1</b-alert>
  </Layout>
</template>
 
<script>
  import Navigation from './Navigation';
  import Layout from './Layout';
 
  export default {
    name: "component1",
    // composants utilisés
    components: {
      Layout, Navigation
    }
  };
</script>

Kommentare

  • Zeile 2: Ansicht Nr. 1 verwendet das Layout der [Layout]-Komponente, das aus zwei Slots namens [left] und [right] besteht;
  • Zeile 4: Das Navigationsmenü wird im linken Slot platziert. Dies ist der oben gezeigte Bereich [3];
  • Zeile 6: Im rechten Slot wird eine Meldung platziert. Dies ist der oben gezeigte Bereich [4];

Die Ansichten 2 und 3 sind ähnlich.

Ansicht Nr. 2, angezeigt von der Komponente [Component2]:


<!-- vue n° 2 -->
<template>
  <Layout :left="true" :right="true">
    <!-- navigation -->
    <Navigation slot="left" />
    <!-- message -->
    <b-alert show variant="secondary" slot="right">Vue 2</b-alert>
  </Layout>
</template>
 
<script>
  import Navigation from './Navigation';
  import Layout from './Layout';
 
  export default {
    name: "component2",
    // composants de la vue
    components: {
      Layout, Navigation
    }
  };
</script>

Ansicht Nr. 3, angezeigt von der Komponente [Component3]:


<!-- vue n° 3 -->
<template>
  <Layout :left="true" :right="true">
    <!-- navigation -->
    <Navigation slot="left" />
    <!-- message -->
    <b-alert show variant="info" slot="right">Vue 3</b-alert>
  </Layout>
</template>
 
<script>
  import Navigation from "./Navigation";
  import Layout from "./Layout";
 
  export default {
    name: "component3",
    // composants de la vue
    components: {
      Layout,
      Navigation
    }
  };
</script>

13.8. Das Projekt ausführen

Image

Bei der Ausführung wird die folgende Ansicht angezeigt:

Image

  • In [1] lautet die URL [http://localhost:8080]. Anschließend wurde die folgende Routing-Regel ausgeführt: 

{ path: '/', name: 'home', component: Component1 }

Daher wurde die Komponente [Component1] angezeigt. Sie zeigt Ansicht Nr. 1 [2] an. Klicken wir nun auf den Link [View 1], dessen Code wie folgt lautet:


<b-nav-item to="/vue1" exact exact-active-class="active">Vue 1</b-nav-item>

Die Anzeige sieht nun wie folgt aus:

  • In [3] wurde die folgende Routing-Regel ausgeführt: 

path: '/vue1', name: 'vue1', component: Component1

Also wurde erneut die Komponente [Component1] angezeigt und damit Ansicht 1 [4]. Klicken wir nun auf den Link [View 2], dessen Code wie folgt lautet:


<b-nav-item to="/vue2" exact exact-active-class="active">Vue 2</b-nav-item>

Die neue Ansicht sieht dann wie folgt aus:

Image

  • In [5] wurde die folgende Routing-Regel ausgeführt: 

path: '/vue2', name: 'vue2', component: Component2

Daher wurde die Komponente [Component2] angezeigt, bei der es sich um Ansicht 2 handelt. Wenn wir nun auf den Link [View 3] klicken, dessen Code wie folgt lautet:


<b-nav-item to="/vue3" exact exact-active-class="active">Vue 3</b-nav-item>

erhalten wir die folgende neue Ansicht:

Image

  • In [6] wurde die folgende Routing-Regel ausgeführt: 

path: '/vue3', name: 'vue3', component: Component3

Daher wurde die Komponente [Component3] angezeigt, d. h. Ansicht Nr. 3 [8].

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