Vue Router #

A Vue Router egy külső csomag, amely megoldja a különböző oldalak kezelését útvonalak alapján az webappunkban.

Ezt az npm i vue-router paranccsal tudjuk telepíteni a projektünkbe.

Útvonalak definiálása #

Rendszerint az /src/router/index.js-ben fogjuk ezeket kezelni.

Elemezzük a következő mintát:

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import AboutView from '../views/AboutView.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },
    {
      path: '/about',
      name: 'about',
      component: AboutView
    }
  ]
})

export default router

Ami fontos számonkra, hogy a createRouter és a createWebHistory függvényeket importáljuk a vue-router csomagból.

A createRouter felel azért, hogy elkészüljön a routoláshoz szükséges struktúra és függvények, míg a createWebHistory a History API-t felhasználva oldja meg, hogy leheseen az oldalak között navigálni.

A router-ünket úgy fogjuk tudni előállítani, hogy a createRouter függvény egy olyan objektumot kap, amely kettő darab bejegyzéssel rendelkezik, az egyik a history, amely az előbbi bővítést végrehajtja. A Másik pedig a routes lesz, amely egy többen tartalmazza az elérhető útvonalakat.

Minden útvonal bejegyzésünk egy-egy objektum lesz, amelyben megadjuk path néven az útvonalat, kap egy name-et amellyeltudunk rá hivatkozni később, valamint a component amelynek az importált nézetet átadjuk.

A router csatolása #

Az alkalmazásunkban az elkészült routerünket a Global API segítségével tudjuk csatolni. Ehhez az alkalmazás példányán a .use() függvényt kell meghívni és az importált routert átadni neki paraméterben.

Routolás beállítása #

Már csak két dolog hiányzik ahhoz, hogy használható legyen a rendszerünk.

Az egyik, hogy az App.vue-ban alakítsuk ki azt a megfelelő layoutot, amelyet szeretnénk az alkalmazásunkban és a tartalmat helyettesítsük a <router-view /> komponenssel. Ez lesz az amibe bele fogja helyezni az adott oldal tartalmát a Vue.

A másik feladatunk, hogy az összes olyan linket, amely az alkalmazáson belülre mutat <router-link></router-link> segítségével oldjuk meg <a></a> helyett. Ennek a komponensnek a to attribútumon keresztül adhatjuk meg, hogy hova mutasson.

Paraméterek kezelése #

A paraméterek megadására a lehető legegyszerűbb megoldás, hogy az útvonal megadásánál a megfelelő / után : segítségével megadjuk a paraméter nevét.

{
  name: 'user',
  path: "/users/:id"
  component: UserDetails
}

Ezt a paramétert a $route.params segítségével érjük el a komponensünkön belül

<template>
  <p>Paraméterek: {{ $router.params }}</p>
</template>

Ellenőrző kérdések #

1. A routes tömbbe, hogyan adhatjuk meg az adatokat?
2. Mire jó a <router-view>?
3. Hogyan haszánlható a <router-link>?
4. Mit jelent az :id az útvonalba?
5. Melyik API része a use() függvény?

\pagebreak