Vue Router, oficiální router pro Vue, umožňuje ve Vue vytvářet jednostránkové aplikace (SPA). Vue Router vám umožňuje mapovat komponenty vaší webové aplikace na různé trasy prohlížeče, spravovat zásobník historie vaší aplikace a nastavit pokročilé možnosti směrování.
Table of Contents
Začínáme s routerem Vue
Chcete-li začít s Vue Routerem, spusťte následující příkaz npm (Node Package Manager) ve vašem preferovaném adresáři a vytvořte aplikaci Vue:
npm create vue
Až budete vyzváni, zda chcete přidat Vue Router pro vývoj jednostránkových aplikací, vyberte Ano.
Dále otevřete svůj projekt v preferovaném textovém editoru. Adresář src vaší aplikace by měl obsahovat složku směrovače.
Složka routeru obsahuje soubor index.js obsahující kód JavaScript pro zpracování tras ve vaší aplikaci. Soubor index.js importuje dvě funkce z balíčku vue-router: createRouter a createWebHistory.
Funkce createRouter vytvoří novou konfiguraci trasy z objektu. Tento objekt obsahuje klíče historie a tras a jejich hodnoty. Klíč tras je pole objektů s podrobnostmi o konfiguraci každé trasy, jak je vidět na obrázku výše.
Po konfiguraci tras je třeba exportovat tuto 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 poté jste aplikaci Vue přiměli používat tuto funkci routeru metodou použití.
Poté můžete své trasy použít ve své aplikaci Vue strukturováním podobného bloku kódu jako je níže:
<script setup>
import { RouterLink, RouterView } from 'vue-router'
</script><template>
<header>
<nav>
<RouterLink to="https://www.makeuseof.com/">Home</RouterLink>
<RouterLink to="/about">About</RouterLink>
</nav>
</header><RouterView />
</template>
Výše uvedený blok kódu ukazuje použití směrovače Vue v komponentě Vue. Fragment kódu importuje dvě komponenty z knihovny vue-router: RouterLink a RouterView.
Komponenty RouterLink vytvářejí odkazy na stránky Home a About ve výše uvedeném úryvku kódu. Atribut to určuje cestu k trase, kterou navigujete, když kliknete na odkaz. Zde máte jeden odkaz ukazující na kořenovou trasu („/“) a další odkaz směřující na trasu „/about“.
Komponenta vykreslí komponentu přidruženou k aktuální trase. Funguje jako zástupný symbol, kde se vykreslí obsah aktuální trasy. Když navigujete na jinou trasu, komponenta přidružená k této trase se vykreslí uvnitř komponenty.
Přidání parametrů do tras vaší aplikace
Vue Router umožňuje předávat parametry a dotazy trasám. Parametry jsou dynamické části adresy URL označené dvojtečkou „:“.
Chcete-li nastavit směrovač Vue tak, aby byl schopen zachytit parametry v trasách aplikace, nakonfigurujte konkrétní 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ý blok kódu ukazuje instanci směrovače se dvěma cestami: domovskou a vývojářskou. Cesta vývojáře zobrazuje informace o konkrétním vývojáři na základě čísla profilu vývojáře.
Nyní upravte svůj soubor App.vue tak, aby vypadal jako fragment kódu níže:
<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/">Home</RouterLink>
<RouterLink :to="{ path: `/developer/${developer.profile}` }">
Dev Profile
</RouterLink>
</nav>
</header><RouterView />
</template>
Výše uvedený blok kódu nastavuje vývojovou proměnnou jako reaktivní objekt se dvěma vlastnostmi: název a profil. Poté druhá komponenta RouterLink směruje do komponenty devView. Nyní máte přístup k hodnotě parametru, který předáte do adresy URL v bloku šablony nebo bloku JavaScript komponenty devView.
Pro přístup k této hodnotě v bloku šablony komponenty devView poskytuje Vue metodu $route, objekt obsahující vlastnosti, které podrobně popisují informace o URL. Tyto informace zahrnují úplnou cestu, dotazy, parametry a komponenty.
Zde je příklad, jak přistupovat k profilu konkrétního vývojáře v komponentě devView pomocí metody $route:
<template>
<div>
<h1>This is developer {{ $route.params.profileNumber }} about page</h1>
</div>
</template>
Výše uvedený fragment kódu ukazuje, jak použít metodu $route pro přístup a zobrazení hodnoty parametru profileNumber v šabloně komponenty.
Vlastnost params v metodě $route obsahuje parametry, které definujete v cestě. Když Vue vykreslí tuto komponentu, nahradí hodnotu $route.params.profileNumber skutečnou hodnotou, kterou předáte v URL.
Pokud například navštívíte /developer/123, zobrazí se zpráva „Toto je stránka o vývojáři 123“.
Můžete také přistupovat k informacím o trase v bloku JavaScript vaší komponenty. Například:
<script setup>
import { useRoute } from "vue-router";const route = useRoute();
</script><template>
<div>
<h1>This is developer {{ route.params.profileNumber }} about page</h1>
</div>
</template>
V předchozím bloku kódu jste přistupovali k objektu $route přímo v šabloně, abyste získali parametry trasy. V aktualizovaném bloku kódu jste však importovali funkci useRoute() z balíčku vue-router. Funkci jste přiřadili proměnné, kterou jste pak použili v šabloně vaší komponenty Vue.
S useRoute() se řídíte přístupem API pro složení Vue 3 využívajícím systém reaktivity. To zajišťuje, že se komponenta automaticky aktualizuje, když se změní parametry trasy.
Přidávání dotazů do tras vaší aplikace
Dotazy nebo řetězce dotazů jsou volitelné parametry přidávané do adresy URL za otazník „?“. Například v cestě „/search?name=vue“ je „name=vue“ řetězec dotazu, kde name je klíč a vue je hodnota.
Chcete-li přidat dotaz k trase ve Vue Router, můžete použít vlastnost query objektu to v komponentě RouterLink. Vlastnost query by měl být objekt, kde každý pár klíč–hodnota představuje parametr dotazu. Zde je příklad:
<RouterLink :to="{ name: 'home', query: {name: 'vue'}}">Home</RouterLink>
Po přidání dotazu do trasy můžete přistupovat k parametrům dotazu ve vašich komponentách Vue. Můžete to udělat pomocí objektu $route nebo funkce useRoute, podobně jako při přidávání parametrů trasy.
Zde je příklad toho, jak používáte parametr dotazu v komponentě:
<template>
{{ $route.query.name }}
</template>
Tento fragment kódu ukazuje, jak přistupovat k hodnotě parametru dotazu (název) z adresy URL a jak ji vykreslovat pomocí objektu $route.query v šabloně komponenty Vue.js.
Definování záložní (404) stránky
Vue Router vám umožňuje definovat záložní trasu, která se bude shodovat, když se s URL neshodují žádné jiné trasy. To je užitečné pro zobrazení stránky „404 nenalezeno“.
Zde je návod, jak můžete definovat záložní trasu pomocí směrovače Vue:
{
path:'/:pathName(.*)',
name: 'NotFound',
component: () => import('../views/NotFoundView.vue')
}
Část /:pathName označuje dynamický segment v adrese URL a (.*) je regulární výraz JavaScriptu, který odpovídá všem znakům za dynamickým segmentem. To umožňuje, aby trasa odpovídala jakékoli cestě.
Když uživatel přejde na adresu URL, která neodpovídá žádným jiným trasám, Vue vykreslí komponentu NotFoundView. Tento přístup se používá ke zpracování chyb 404 nebo zobrazení záložní stránky, když není nalezena požadovaná trasa.
Naučte se vytvářet animace ve Vue
Naučili jste se přidávat parametry a dotazy do tras vaší aplikace. Také jste se naučili, jak definovat záložní stránku pro zpracování chyb 404. Vue Router poskytuje mnohem více funkcí, jako je nastavení dynamických a vnořených tras.
Přidání animací a přechodů mezi prvky na webové stránce může výrazně zlepšit uživatelský zážitek. Musíte se naučit vytvářet přechody a animace ve Vue, abyste vytvořili hladší, poutavější a celkově lepší web.