image
https://unsplash.com/photos/v7daTKlZzaw

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.

Instalacja

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.

Tryby routera

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.

Ścieżki statyczne

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.

Ścieżki dynamiczne

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.

Pojawił się dodatkowy parametr props, który po ustawieniu na true powoduje przekazanie do renderowanego komponentu wartości parametrów URL w obiekcie props.

Nawigacja

Declarative

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>

Programmatic

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 } });

Named views

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.

Obiekt 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.