Skip to content

13. project [vuejs-11]: routing en navigatie

Routing zorgt ervoor dat de gebruiker tussen de verschillende pagina’s van de applicatie kan navigeren.

De projectstructuur is als volgt:

Image

13.1. Installatie van afhankelijkheden

Voor de routing in [Vue.js] is de afhankelijkheid [vue-router] vereist:

Image

  • in [1-3] wordt de afhankelijkheid [vue-router] geïnstalleerd;
  • in [4-6] is, na installatie van de afhankelijkheid, het bestand [package.json] gewijzigd;

13.2. Het routeringsscript [router.js]

De navigatieregels van de applicatie staan opgeslagen in het bestand [router.js] (de naam van het script kan willekeurig zijn):


// benodigde imports voor de routering
import Vue from 'vue'
import VueRouter from 'vue-router'

// routeringsplugin
Vue.use(VueRouter)

// de doelcomponenten van de routing
import Component1 from './components/Component1.vue'
import Component2 from './components/Component2.vue'
import Component3 from './components/Component3.vue'


// de routes van de applicatie
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
  },
]

// de router
const router = new VueRouter({
  routes,
  mode: 'history',
})

// de router exporteren
export default router

Opmerkingen

  • het script [router.js] bepaalt de routeringsregels van onze applicatie;
  • regel 1-6: activering van de plug-in [vue-router] die nodig is voor de routing. Voor deze activering moet de klasse/functie [Vue] (regel 2) en de routeringsplugin (regel 3) worden geïmporteerd. Deze plugin is geïnstalleerd samen met de afhankelijkheid [router] die we zojuist hebben geïnstalleerd;
  • regels 8-11: importeren van de doelweergaven voor de routing;
  • regels 15-21: definitie van de routetabel. Elk element van deze tabel is een object met de volgende eigenschappen:
    • [path]: de URL van de weergave, die we in het veld [URL] van de browser willen zien. Je kunt hier vrijelijk invullen wat je wilt;
    • [name]: de naam van de route. Ook hier kun je invullen wat je wilt;
    • [component]: de component die de weergave weergeeft. Dit moet een bestaande component zijn;

We hebben hier dus vier routes [/, /vue1, /vue2, /vue3].

  • regels 33-36: de router is een instantie van de klasse [VueRouter] die in regel 3 is geïmporteerd. De constructor van [VueRouter] wordt hier gebruikt met twee parameters:
    • de routes van de applicatie;
    • een modus voor het schrijven van de URL in de browser: de standaardmodus [hash] schrijft de URL in de vorm [localhost:8080/#/vue1] (# is de hash). De modus [history] verwijdert de # [localhost:8080/vue1];
  • regel 39: de router wordt geëxporteerd;

13.3. Het hoofdscript [main.js]

Het hoofdscript [main.js] is als volgt:


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

// plug-ins
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'

// configuratie
Vue.config.productionTip = false

// projectinstantiëring [App]
new Vue({
  name: "app",
  // hoofdweergave
  render: h => h(App),
  // router
  router: monRouteur,
}).$mount('#app')

Opmerkingen

  • regel 14: de router die door het script [router.js] is geëxporteerd, wordt geïmporteerd;
  • regel 25: deze router is doorgegeven als parameter aan de constructor van de klasse [Vue], die de hoofdweergave [App] zal weergeven, gekoppeld aan de eigenschap [router] van de weergave;

13.4. De hoofdweergave [App]

De code van de hoofdweergave is als volgt:


<template>
  <div class="container">
    <b-card>
      <!-- een bericht -->
      <b-alert show variant="success" align="center">
        <h4>[vuejs-11] : routage et navigation</h4>
      </b-alert>
      <!-- het huidige routeringsoverzicht -->
      <router-view />
    </b-card>
  </div>
</template>

<script>
  export default {
    name: "app"
  };
</script>

Opmerkingen

  • regel 9: geeft de huidige routeringsweergave weer. De tag <router-view> wordt alleen herkend als de eigenschap [router] van de weergave is geïnitialiseerd;

13.5. De opmaak van de weergaven

De opmaak van de weergaven wordt verzorgd door de volgende component [Layout]:


<template>
  <!-- regel -->
  <div>
    <b-row>
      <!-- gebied met drie kolommen -->
      <b-col cols="2" v-if="left">
        <slot name="left" />
      </b-col>
      <!-- gebied met negen kolommen -->
      <b-col cols="10" v-if="right">
        <slot name="right" />
      </b-col>
    </b-row>
  </div>
</template>

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

We hebben deze opmaak al gebruikt en uitgelegd in het project [vuejs-06] in de paragraaf [vuejs-06].

13.6. De navigatiecomponent

De component [Navigation] biedt de gebruiker een navigatiemenu:

Image

De component die het blok [1] genereert, is de volgende:


<template>
  <!-- Bootstrap-menu met drie opties -->
  <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>
  • deze code genereert blok 1 met drie links voor navigatie;
  • het attribuut [to] van de <b-nav-item>-tags moet overeenkomen met een van de eigenschappen [path] van de routes in de router van de applicatie;

13.7. De weergaven

Weergave nr. 1 is als volgt:

Image

De zones [3-4] worden gegenereerd door de volgende component [Component1]:


<template>
  <Layout :left="true" :right="true">
    <!-- navigatie -->
    <Navigation slot="left" />
    <!-- bericht-->
    <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",
    // gebruikte componenten
    components: {
      Layout, Navigation
    }
  };
</script>

Opmerkingen

  • regel 2: weergave nr. 1 maakt gebruik van de lay-out van de component [Layout], die bestaat uit twee slots met de naam [left, right];
  • regel 4: het navigatiemenu is in de linker slot geplaatst. Dit is het gebied [3] dat hierboven te zien is;
  • regel 6: er wordt een bericht in de rechter slot geplaatst. Dit is het gebied [4] dat hierboven te zien is;

Weergaven 2 en 3 zijn vergelijkbaar.

Weergave nr. 2 weergegeven door de component [Component2]:


<!-- weergave nr. 2 -->
<template>
  <Layout :left="true" :right="true">
    <!-- navigatie -->
    <Navigation slot="left" />
    <!-- bericht -->
    <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",
    // componenten van de weergave
    components: {
      Layout, Navigation
    }
  };
</script>

Weergave nr. 3 weergegeven door de component [Component3]:


<!-- weergave nr. 3 -->
<template>
  <Layout :left="true" :right="true">
    <!-- navigatie -->
    <Navigation slot="left" />
    <!-- bericht -->
    <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",
    // weergavecomponenten
    components: {
      Layout,
      Navigation
    }
  };
</script>

13.8. Uitvoering van het project

Image

Bij uitvoering wordt de volgende weergave getoond:

Image

  • in [1] is URL gelijk aan [http://localhost:8080]. De volgende routeringsregel is toen uitgevoerd: 

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

Daardoor werd de component [Component1] weergegeven. Deze toont weergave nr. 1, [2]. Laten we nu op de link [Vue 1] klikken, waarvan de code als volgt luidt:


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

De weergave ziet er nu als volgt uit:

  • in [3] is de volgende routeringsregel uitgevoerd: 

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

Er werd dus opnieuw de component [Component1] weergegeven en daarmee weergave nr. 1 [4]. Laten we nu klikken op de link [Vue 2] met de volgende code:


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

Het nieuwe scherm ziet er dan als volgt uit:

Image

  • in [5] is de volgende routeringsregel uitgevoerd: 

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

Het is dus de component [Component2] die werd weergegeven, en daarmee weergave nr. 2. Als we nu op de link [Vue 3] klikken, waarvan de code als volgt luidt:


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

krijgen we de volgende nieuwe weergave te zien:

Image

  • in [6] is de volgende routeringsregel uitgevoerd: 

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

Het is dus de component [Component3] die werd weergegeven, d.w.z. weergave nr. 3 [8].

https://stahe.github.io
Deze cursus-tutorial, geschreven door Serge Tahé, wordt aan het publiek ter beschikking gesteld volgens de voorwaarden van de Creative Commons Naamsvermelding – Geen commercieel gebruik – Gelijk delen 3.0 Ongewijzigd.