Navigation bar & Vue Router

[M4TThys123]

Eerste versie

---

Bij deze eerste versie heb ik de basis van de Vue Router opgezet en de router-links heb ik in mijn HTML gezet. Navigeren werkt in vue niet via elementen, maar vie de Vue Router

<template>

<section class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav ">
        <li class="nav-item">
            <router-link to="/" class="nav-link">Home</router-link>
        </li>
        <li class="nav-item">
            <router-link to="/over" class="nav-link">Over</router-link>
        </li>
        <li class="nav-item">
            <router-link to="/diensten" class="nav-link">Diensten</router-link>
        </li>
        <li class="nav-item">
            <router-link to="/partners" class="nav-link">Partners</router-link>
        </li>
        <li class="nav-item">
            <router-link to="/contact" class="nav-link">Contact</router-link>
        </li>
    </ul>
</section>

Vue Router

Ik heb de Vue Router library geïnstalleerd, deze geeft de mogelijkheid om te navigeren tussen verschillende routes. Maar geeft ook de mogelijkheid om deze te beheren. De Router maakt gebruik van componenten voor het renderen van routes. Al deze routes zijn gedefinieerd in een bestand. Bijvoorbeeld src/router/index.js

Installeren:

1. Installeer van de Vue Router

    npm install vue-router

1. Importeer van de Vue Router: In het bestand waar je de router wilt gebruiken (bijvoorbeeld main.js)

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

3. Definieer van de routes in index.js

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import Diensten from '../views/Diensten.vue'

const routes = [
    {
        path: '/',
        name: 'Home',
        component: Home
    },
    {
        path: '/diensten',
        name: 'Diensten',
        component: Diensten
    },
]

1. Maken van de router in de ****main.js****

// import { createApp } from 'vue'
// import App from './App.vue'
import router from './router'

// const app = createApp(App)
app.use(router)
// app.mount('#app')

1. Navigeren door de applicatie met de links

<router-link to="/">Home</router-link>
<router-link to="/diensten">Diensten</router-link>

1. Render de router-view in de **app.vue**, components per route te renderen

<template>
  <Header></Header>

    <main>
      <router-view class="views"/>
    </main>
</template>

index.js Template

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import Diensten from '../views/Diensten.vue'

const routes = [
    {
        path: '/',
        name: 'Home',
        component: Home
    },
    {
        path: '/diensten',
        name: 'Diensten',
        component: Diensten
    },
]

const router = createRouter({
    history: createWebHistory(),
    routes
})

export default router

Versie 2

---

Ik ben begonnen door het refactoren van mijn oude code, daarnaast heb ik super veel HTML & CSS toegevoegd. Maar ik kwam er achter dat ik het mijzelf super moeilijk maak, doordat ik zoveel code staan kan ik niks meer kan lezen of vinden.

Ik heb wel een HamburgerMenu component gemaakt die ook geanimeerd is, daarnaast heb ik een blur gemaakt voor de achtergrond.

HamburgerMenu component

<template>
  <button id="ham-burger" @click="toggleNav" :class="{ 'open': isNavOpen }">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </button>
</template>

blur

.blur{
  backdrop-filter: blur(24px);
}

Brakepoint gebruikt

@media only screen and (min-width: 0px) and (max-width: 1024px) {

}

@media only screen and (min-width: 0px) and (max-width: 750px) {

}

[M4TThys123]

Versie 3

---

Ik ben begonnen door het refactoren van mijn 2 ouder versies. Deze versie ga ik code schrijven die door mijn router constance heen loopt. Hiervoor heb ik eerst een nav template gemaakt.

nav template

<nav class="nav__menu">
    <ul class="nav__list">
        <li class="nav__link">
        <router-link class="nav__link" to="/"> Temple nav</router-link>
        </li>
    </ul>
</nav>

Vervolgens heb ik een v-for gemaakt, dat is een for-loop in vue. In eerste instantie heb ik deze data uit mijn routes data() object gehaald om te testen, maar deze staat ook al in mijn index.js.

data() {
    return {
      routes: [
        {
          path: '/',
          name: 'Home',
        },
        {
          path: '/diensten',
          name: 'Diensten',
        },
      ]
    }
  }

Nadat deze loop werkte heb ik een nieuwe v-for gemaakt met de data uit de router.

<template> v-for met data uit de router

<template>
    <nav class="nav__menu">
        <ul class="nav__list">
            <li class="nav__link"
                    v-for="(route, index) in router().options.routes" :key="index">
                <router-link class="nav__link" :to="route.path"> {{ route.name}}</router-link>
            </li>
        </ul>
    </nav>
</template>

<script> Importeren van de index.js

import router from '/src/router/index.js'

Styling

Vervolgens ben ik verder gegaan met het stylen van mijn navigatie-menu

[M4TThys123]

Versie 4 Mobile nav

---