Router w aplikacjach jest często ich "kręgosłupem", dlatego warto wiedzieć jakie ma możliwości. Z tego wpisu dowiesz się m.in. jak wpiąć vue-router do aplikacji, tworzyć ścieżki statyczne i dynamiczne oraz nawigować do kolejnych podstron.
Zacznijmy od instalacji i "podłączenia" routera do naszej aplikacji.
npm install vue-router
Utwórzmy plik router.js
z poniższą zawartością:
// router.js
import Vue from 'vue';
import Router from 'vue-router';
import Home from './components/HelloWorld.vue';
Vue.use(Router);
const RouterVue = new Router({
mode: 'history',
base: process.env.BASE_URL,
routes: [
{
path: '/',
name: 'home',
component: HelloWorld
}
]
});
export default RouterVue;
Następnie w pliku App.vue
, dodajmy następujący kod:
<template>
<div id="app">
<router-view />
</div>
</template>
W miejsce <router-view />
zostanie wstawiony komponent HelloWorld
.
W domyślnym ustawieniu VueRouter pracuje w trybie 'hash'. W większości przypadków preferuję tryb 'history', który wykorzystuje historyAPI. Wiąże się to z odpowiednią konfiguracją serwera, o którą nie należy się martwić używając VueCLI lokalnie, lecz w momencie deploymentu mogą pojawić się problemy, dlatego warto wcześniej zapoznać się z tym artykułem.
Następnie stwórzmy kilka podstron ze stałym adresem URL.
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/dashboard',
name: 'dashboard',
component: Dashboard
},
{
path: '/login',
name: 'login',
component: Login
}
];
Jak widać nie dzieje się tu nic szczególnego. Zbiore route'ów jest tablica z obiektami, gdzie:
path
- ścieżka, name
- nazwę route'a, component
- komponent który ma zostać wyrenderowany.Vue router pozwala na tworzenie ścieżek dynamicznych. Dodajmy więc kolejny route do naszej tablicy.
{
path: "/company/:id",
name: "company",
component: Company,
props: true
},
{
path: "/company/:id/user/:userId",
name: "companyUser",
component: CompanyUser,
props: true
},
Parametry dynamiczne są konstruowane w następujący sposób /:nazwa_parametru
. Możemy zatem wskazać do którego parametru chcemy dokładnie przypisać naszą zmienną,
w szczególności gdy jest ich więcej. W kolejnej sekcji pokazuję jak ustawiać parametry dla danego urla.
Vue router wspiera definiowanie ścieżek dynamicznych w przy pomocy wyrażen regularnych, przez użycie [tej](https://github.com/pillarjs/path-to-regexp/tree/v1.7.0#parameters) biblioteki.
Pojawił się dodatkowy parametr props
, który po ustawieniu na true
powoduje przekazanie do renderowanego komponentu wartości parametrów URL w obiekcie props
.
Zobaczmy jak można odwołać się do ścieżek routera.
Vue Router dostarcza nam komponent <router-link>
, który finalnie przyjmuje postać tagu <a>
.
Jedną z możliwości odwołania się do konkretnej ścieżki jest użycie nazwy route'a.
Zalecam definiowanie linków w ten sposób, ponieważ w razie zmiany adresu w routerze, nie będziemy zmuszeni do poprawy samego linku.
<router-link :to="{ name: 'company', params: { id: 123 }}"
>Google Inc</router-link
>
<router-link :to="{ name: 'companyUser', params: { id: 123, userId: 99 }}"
>James</router-link
>
Inną możliwością nawigacji po podstronach jest odwołanie się do konkretnego adresu url, zdefiniowanego wcześniej. Można użyć do tego również komponentu <router-link>
jak poniżej:
<router-link :to="/company/123">Google Inc</router-link>
Jeśli, potrzebujesz przełączenia widoku z poziomu np. metody, możnesz posłużyć się globalnie dostępną instancją routera przez wywołanie this.$router
z dostępnymi metodami (push
, replace
, go
).
Metoda push
przyjmuje takie same argumenty jak komponent router-link
, więc przykładowe wywołanie może wyglądać następująco:
this.$router.push('/company/123');
// lub
this.$router.push({ name: 'company', params: { id: 123 } });
Może się zdarzyć, że w obrębie jednej ścieżki url będziesz chciał wyświetlić kilka widoków np. dodatkowy header, sidebar czy modal box.
Możesz w tym celu użyć tzw. named views, aby nie przenosić logiki ściśle związanej z routingiem do niższych warstw aplikacji.
W tym celu należy zdefiniować dodatkowe "wyjścia" routera czyli <router-view />
z atrybutem name
.
Załóżmy zatem, że chcemy na danym widoku wyświetlić dodatkowo modal box.
W pliku App.vue
dodajmy <router-view name="modal" />
, a następnie skonfigurujmy nasz widok w pliku router.js
dodając kolejną ścieżkę.
import Modal from '@/components/Modal.vue';
// ...
{
path: '/login',
name: 'login',
+ components: {
+ default: HelloWorld,
+ modal: Modal
+ }
},
Ważna zmiana to z component
na components
. W obiekcie components
należy zdefiniować na podstawie nazw widoków, jakie komponenty mają zostać wczytane w danym widoku.
Komponent default
to ten bez nazwy.
W kolejnym artykule o routerze rozwijam ten przykład o kolejne funkcje.
meta
Jeśli chcesz konkretnemu widokowi przekazać jakieś dodatkowe informacje, możesz wykorzystać obiekt meta
.
Jest to użyteczne gdy np. chcesz w konfiguracji routera przechować informację, który route wymaga zalogowania użytkownika.
Ja wykorzystuję to pole również do tworzenia np. breadcrumbsów na stronie.
Zmieńmy konfiguracje do ścieżki dashboard
następująco:
{
path: '/dashboard',
name: 'dashboard',
component: Dashboard,
+ meta: {
+ private: true
+ }
},
Następnie w komponencie możesz odwołać się do tego pola przez obiekt $route
jak poniżej:
this.$route.meta.private
lub używając hooków wywoływanych w różnych cyklach nawigacji np. przed lub po wyrenderowaniu widoku.
Zachęcam do zgłębienia tego zagadnienia tutaj.