Vue Router, oficiální nástroj pro směrování v rámci Vue, umožňuje konstrukci jednostránkových aplikací (SPA). Tento nástroj umožňuje propojovat komponenty webové aplikace s různými URL adresami v prohlížeči, spravovat historii navigace a implementovat pokročilé mechanismy směrování.
Zahájení práce s Vue Router
Pro začátek s Vue Routerem, využijte následující příkaz v terminálu pomocí Node Package Manager (npm) ve zvoleném adresáři, abyste vytvořili novou Vue aplikaci:
npm create vue
Během konfigurace, budete dotázáni, zda chcete integrovat Vue Router pro vývoj jednostránkových aplikací. Zvolte možnost „Ano“.
Následně otevřete projekt v preferovaném textovém editoru. V adresáři `src` vaší aplikace by měla být přítomna složka s názvem `router`.
Složka `router` obsahuje soubor `index.js`, který slouží pro správu tras v aplikaci. Tento soubor importuje dvě funkce z balíčku `vue-router`: `createRouter` a `createWebHistory`.
Funkce `createRouter` slouží k vytvoření instance routeru na základě konfigurace. Tato konfigurace zahrnuje objekty `history` a `routes`. Objekt `routes` je pole objektů, které definují jednotlivé cesty, jak je patrné z obrázku výše.
Po definování tras je nutné exportovat instanci routeru a importovat ji do souboru `main.js`:
import './assets/main.css'import { createApp } from 'vue'
import App from './App.vue'
import router from './router'const app = createApp(App)
app.use(router)
app.mount('#app')
Importovali jste funkci routeru do souboru `main.js` a následně jste ji aplikovali v aplikaci Vue pomocí metody `use()`.
Nyní můžete používat trasy ve vaší Vue aplikaci strukturováním kódu podobně jako v následujícím příkladu:
<script setup>
import { RouterLink, RouterView } from 'vue-router'
</script><template>
<header>
<nav>
<RouterLink to="https://www.makeuseof.com/">Domů</RouterLink>
<RouterLink to="/about">O aplikaci</RouterLink>
</nav>
</header><RouterView />
</template>
Výše uvedený kód demonstruje použití Vue Routeru v komponentě Vue. Importují se dvě komponenty z knihovny `vue-router`: `RouterLink` a `RouterView`.
Komponenty `RouterLink` generují odkazy na stránky Domů a O aplikaci. Atribut `to` specifikuje cestu, na kterou se navigujete po kliknutí na odkaz. V tomto příkladu jeden odkaz směřuje na kořenovou trasu (`/`) a druhý na trasu `/about`.
Komponenta `RouterView` zobrazuje komponentu spojenou s aktuální trasou. Slouží jako zástupné místo pro vykreslení obsahu příslušné trasy. Při navigaci na jinou trasu se komponenta spojená s touto trasou vykreslí v rámci `RouterView`.
Přidávání parametrů do tras aplikace
Vue Router umožňuje předávání parametrů a dotazů v URL. Parametry jsou dynamické části URL, které jsou označeny dvojtečkou `:`.
Pro nastavení Vue Routeru pro zachycení parametrů v cestách aplikace je nutné definovat příslušnou trasu v souboru `index.js`:
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: "https://www.makeuseof.com/",
name: "home",
component: HomeView,
},
{
path: "/developer/:profileNumber",
name: "developer",
component: () => import("../views/devView.vue"),
},
],
});
Výše uvedený kód představuje instanci routeru se dvěma cestami: domovskou a vývojářskou. Cesta vývojáře slouží k zobrazení informací o konkrétním vývojáři na základě jeho profilového čísla.
Nyní upravte soubor `App.vue` tak, aby odpovídal následujícímu kódu:
<script setup>
import { ref } from "vue";
import { RouterLink, RouterView } from "vue-router";const developer = ref([
{
name: "Chinedu",
profile: 2110,
},
]);
</script><template>
<header>
<nav>
<RouterLink to="https://www.makeuseof.com/">Domů</RouterLink>
<RouterLink :to="{ path: `/developer/${developer.profile}` }">
Profil vývojáře
</RouterLink>
</nav>
</header><RouterView />
</template>
V tomto kódu je definována reaktivní proměnná `developer` s vlastnostmi `name` a `profile`. Druhá komponenta `RouterLink` navigující do komponenty `devView`. Nyní je možné přistupovat k hodnotě parametru předaného v URL jak v šabloně, tak v JavaScriptovém kódu komponenty `devView`.
Pro přístup k této hodnotě v šabloně komponenty `devView` poskytuje Vue metodu `$route`, což je objekt obsahující informace o URL adrese. Tyto informace zahrnují celou cestu, parametry, dotazy a komponenty.
Následuje příklad, jak získat profil vývojáře v komponentě `devView` s využitím metody `$route`:
<template>
<div>
<h1>Stránka o vývojáři {{ $route.params.profileNumber }}</h1>
</div>
</template>
Tento kód ukazuje, jak se s metodou `$route` přistupuje k hodnotě parametru `profileNumber` a zobrazuje se v šabloně komponenty.
Vlastnost `params` v metodě `$route` obsahuje parametry definované v cestě. Když Vue vykresluje tuto komponentu, nahradí hodnotu `$route.params.profileNumber` skutečnou hodnotou předanou v URL.
Například při návštěvě `/developer/123`, se zobrazí zpráva „Stránka o vývojáři 123“.
Informace o trase lze získat také v JavaScriptovém bloku komponenty, například:
<script setup>
import { useRoute } from "vue-router";const route = useRoute();
</script><template>
<div>
<h1>Stránka o vývojáři {{ route.params.profileNumber }}</h1>
</div>
</template>
V předchozím kódu se k objektu `$route` přistupovalo přímo v šabloně. V tomto příkladu je použita funkce `useRoute()` z balíčku `vue-router` a její výsledek je uložen v proměnné. Tato proměnná je pak použita v šabloně komponenty Vue.
S použitím `useRoute()` je dodržován přístup API pro kompozici ve Vue 3, který využívá systém reaktivity. To zajišťuje automatickou aktualizaci komponenty při změně parametrů trasy.
Přidávání dotazů do tras aplikace
Dotazy nebo řetězce dotazů jsou volitelné parametry připojené k URL za otazníkem `?`. Například v cestě `/search?name=vue` je `name=vue` řetězec dotazu, kde `name` je klíč a `vue` je hodnota.
Pro přidání dotazu do trasy ve Vue Routeru lze použít vlastnost `query` objektu `to` v komponentě `RouterLink`. Vlastnost `query` by měla být objektem, kde každý pár klíč-hodnota reprezentuje parametr dotazu. Například:
<RouterLink :to="{ name: 'home', query: {name: 'vue'}}">Domů</RouterLink>
Po přidání dotazu k trase je možné přistupovat k parametrům dotazu v komponentách Vue pomocí objektu `$route` nebo funkce `useRoute`, podobně jako u parametrů trasy.
Následuje příklad použití parametru dotazu v komponentě:
<template>
{{ $route.query.name }}
</template>
Tento kód demonstruje, jak se přistupuje k hodnotě parametru dotazu `name` z URL adresy a jak se zobrazuje pomocí `$route.query` v šabloně komponenty Vue.js.
Definování záložní (404) stránky
Vue Router umožňuje definování záložní trasy, která se použije v případě, že žádná jiná trasa neodpovídá URL adrese. To je užitečné pro zobrazení stránky „404 Nenalezeno“.
Způsob, jak definovat záložní trasu ve Vue Routeru:
{
path:'/:pathName(.*)',
name: 'NotFound',
component: () => import('../views/NotFoundView.vue')
}
Část `/:pathName` označuje dynamický segment v URL adrese a `(.*)` je regulární výraz, který odpovídá libovolnému počtu znaků za tímto dynamickým segmentem. Tím se zajistí, že tato trasa bude odpovídat jakékoli cestě.
Když uživatel navštíví URL adresu, která neodpovídá žádné jiné definované trase, Vue zobrazí komponentu `NotFoundView`. Tento přístup se používá pro zpracování chyb 404 nebo pro zobrazení záložní stránky, když není nalezena požadovaná trasa.
Naučte se vytvářet animace ve Vue
Naučili jste se, jak přidávat parametry a dotazy do tras aplikace. Také jste se naučili definovat záložní stránku pro zpracování chyb 404. Vue Router nabízí mnohem více funkcí, jako je konfigurace dynamických a vnořených tras.
Přidání animací a přechodů mezi prvky webové stránky může výrazně zlepšit uživatelský zážitek. Je důležité se naučit vytvářet přechody a animace ve Vue, abyste mohli vytvářet plynulejší, poutavější a celkově lepší webové stránky.