Vue.js: Dodanie obsługi routingu

Vue.js 2.5.x

0:00W tej lekcji pokażę ci jak do naszej aplikacji dodać Vue Router, ale jeszcze jedno sprostowanie

0:05niewielkie, bo tutaj zauważyłem, że po odświeżeniu nie do końca wygląda to tak jak

0:09powinno. Ten obrazek trochę dziwnie wskakuje, a kiedy wczytaliśmy ten pierwszy obrazek,

0:13robiliśmy this loaded równa się true i zapomniałem zmienić jednej rzeczy. Tutaj

0:17v-if, zamiast image jest length, czyli pokazujemy to wtedy, kiedy się nam ta tablica

0:21wczyta. Powinniśmy to byli zamienić na loaded, czyli jeżeli loaded ma

0:27wartość true, tylko wtedy to chcemy pokazywać i zobacz będzie różnica,

0:31teraz ten obrazek będzie wskakiwał dopiero kiedy on na pewno będzie wczytany, więc

0:35taka mała zmiana. Przejdźmy teraz na stronę Vue Router. Jest

0:40to dosyć zaawansowany plugin do Vue, który nie jest częścią samego framework'a

0:44Vue, ale za jego pomocą można komponować sobie swój własny framework,

0:48dodawać różne rzeczy, z użyciem axios jak widziałeś bez problemu można pobierać dane,

0:52a Vue Router służy nam do podmiany tutaj na pasku adresu url'i

0:58w taki sposób, żeby one odzwierciadlały gdzie jesteśmy w naszej aplikacji. Będziemy

1:02chcieli ten Vue Router sobie teraz zainstalować przy robieniu tej templatki

1:07Vue init webpack pytał nas o to czy chcemy, wtedy powiedzieliśmy, że nie, ale

1:11teraz jeżeli tutaj zatrzymam serwer i wpiszemy npm install minus d Vue Rauter,

1:16to będziemy go mogli zainstalować i zaimportować. Zrobimy

1:21to tutaj w głównej naszej aplikacji, czyli main. Importujemy tutaj

1:25Vue i chciałbym również zrobić import vue router from

1:29vue router. Będziemy

1:33go tutaj mieli już się zainstalował, więc uruchomię sobie serwer żebyśmy byli pewni,

1:38że wszystko działa i teraz będziemy musieli ten router tutaj skonfigurować.

1:42Po pierwsze musimy sobie utworzyć taką tablice routes

1:46i możemy to zrobić tak, jest

1:51to tablica w której będziemy podawać obiekty, ale ja nie chcę zaśmiecać tej głównej aplikacji, dlatego

1:55ja to chcę wyeksportować do innego pliku. W naszym katalogu 57 src

2:01chciałbym sobie utworzyć katalog, który nazwę routes

2:05i tam będzie plik, może

2:09z wielkiej litery, routes.js i niego chcę zrobić export default

2:15i właśnie tutaj będzie taka tablica, okej

2:20i w niej to będziemy sobie wszystko mogli ustawić, a tutaj sobie to zaimportujemy, po

2:24prostu. Chciałbym zrobić tutaj u góry import routes from

2:29i tutaj będziemy musieli podać katalog, w którym jesteśmy aktualnie następnie

2:33routes i plik routes.js, czyli js

2:38nie muszę podawać. Tylko po to, żeby w tym pliku tego nie wpisywać, zrobiłem to

2:42tak. Ten plik z wielkiej litery tutaj nazwałem i będziemy to mieli w tym miejscu i

2:46teraz route, które mogą utworzyć, to jest taki obiekt, może ich tutaj

2:50być dowolnie wiele i tworzymy sobie path, czyli możemy

2:54tutaj powiedzieć, że jeżeli adres znasz to jest ukośnik, czyli jakby strona główna,

2:58to coś ma się wydarzyć. Natomiast ja chcę najpierw przypisać adres dla

3:02slide i następnie możemy dynamicznie sobie tutaj przypisać parametr,

3:07bo będę chciał zrobić taki adres, że jeżeli będziemy zmieniać te slajdy, to tutaj

3:11będzie napisane slide na przykład 1, 2 i tak dalej, więc

3:15ten dynamiczny parametr można tutaj zbindować za pomocą takiego dwukropka

3:19i nazwę go index, a tutaj musimy podać jaki komponent ma być wtedy wczytywany.

3:24No właśnie. Chciałbym wczytać komponent

3:28slideshow, więc muszę go sobie tutaj zaimportować, dlatego zrobiłem to

3:32w osobnym pliku, żeby po prostu było wygodniej, więc napiszemy import slideshow from

3:36i zobaczmy w jakim jesteśmy miejscu. Muszę wyjść jeden katalog

3:40do góry, do components i slideshow.

3:46To mi zaimportuje ten nasz component slideshow, będzie

3:51przekompilowane odpowiednio i w tym routes będę mógł powiedzieć, że jeżeli przejdziemy

3:55pod path slide cokolwiek, to chce wczytać komponent slideshow, czyli do

4:00niego tutaj trzeba przekazać referencje, a nie tylko podać jego nazwę. Okej, to jednak

4:04nie wszystko, bo ten plik routes teraz sobie tutaj za importowaliśmy, ale

4:08musimy pewną rzecz jeszcze zrobić. Musimy stworzyć nowy router z użyciem

4:12new vue router i jemu przekazać

4:17routes, taki klucz i następnie routes, ale skoro

4:21to tutaj się nazywa tak samo to w ES6 można ten zapis skrócić w ten sposób i to

4:25jeszcze nie wszystko, bo do naszej głównej aplikacji musimy przekazać teraz router

4:30na wartość router, czyli dokładnie na to, co mamy tutaj. Znowu skrótowo

4:34można zapisać to w ten sposób, pamiętając tutaj o przecinku. Prawie

4:39wszystko działa, ale jeszcze nie wszystko, bo żeby to mogło działać to my tutaj powiedzieliśmy,

4:43że po przejściu pod taki adres chcielibyśmy wczytywać ten komponent, ale pytanie

4:48brzmi gdzie. No właśnie. Musimy przejść do naszej aplikacji i w

4:52miejscu w którym wczytywaliśmy slideshow i przekazywaliśmy mu images, zamienimy to

4:56teraz na taki specjalny element, który się nazywa router Vue

5:00i tutaj go zamknę w ten sposób. Mogę również

5:04mu przekazywać różne rzeczy i one wtedy będą przekazane do tego komponentu, czyli tutaj zostanie

5:08wstawiony ten slideshow, to działa podobnie jak komponent ease,

5:12które ci w tym kursie pokazywałem i w tym miejscu właśnie to będzie wstawione, a pozostała

5:17struktura będzie tutaj bez zmian. Okej, no i sprawdźmy

5:21czy to ma sens. Odświeżam, widzimy, że są jakieś błędy, więc sprawdźmy co jest

5:25nie tak, okej. Widzimy, że ten komponent nie został odpowiednio

5:29rozpoznany, jeszcze jednej rzeczy zapomnieliśmy. Tutaj musimy jeszcze zrobić jedną

5:33rzecz, vue use, w ten sposób mówimy, że vue ma korzystać z jakiegoś plugin'u. W

5:37lekcji poprzedniej pokazywałem ci axios, w którym mówiłem, że można również skonfigurować

5:42z użyciem właśnie plugin'u, który się nazywa vue axios. Wtedy też byśmy

5:47robili vue use. Tu musimy powiedzieć vue use vue router, czyli

5:51żeby Vue wiedziało, że w ogóle ma z czegoś takiego korzystać i wtedy będzie rozumiało, co

5:55to znaczy, że do instancji zostało przekazane coś takiego. Teraz nam działa i zauważ,

5:59że taki hash się tutaj dodał. Wszystkie nasze route'y będą za takim hash'em, aczkolwiek

6:03można to zmienić w ten sposób, żeby tutaj było HTML5 History API, ale

6:08ja już tego nie będę robił. Jest to temat na kolejny materiał, tak naprawdę, czyli

6:12budowanie bardziej złożonych aplikacji. Ważne, że ten router będzie działał,

6:17tylko że będąc na stronie głównej nic nam się nie wczytało, bo my powiedzieliśmy,

6:21że ten nasz komponent ma się wczytać jeżeli jesteśmy pod takim adresem, więc

6:25jeżeli to zmienimy na slajd na przykład 1, to wtedy nam się to

6:29powinno czytać. Jak widzisz, coś tutaj się dzieje, powinno to

6:33zadziałać. Jeżeli nie, to tutaj odświeżmy, zobaczymy czy wtedy to się wczyta. Wczytało

6:38się, natomiast chciałbym dla naszej konkretnej aplikacji z uwagi na fakt, że nie będziemy

6:42mieć kilku różnych widoków, to chciałbym zrobić przekierowanie, że

6:46jak wyjdziemy na stronę główną, to żeby przekierowało do pierwszego slajdu i można

6:51to łatwo zrobić tutaj stawiając drugi obiekt konfiguracyjny, czyli

6:56osobną ścieżkę, mówię, jeżeli ktoś wejdzie na stronę główną to zrób redirect

7:01do i tutaj chcę zrobić slajd 1,

7:05czyli do pierwszego slajdu. Zapiszmy i zobaczmy. Jak

7:09widzisz automatycznie nas przekierowało i teraz to wszystko działa poprawnie. Natomiast zanim

7:14jeszcze dokończymy tą aplikację to chciałbym ci powiedzieć co możesz zrobić z użyciem Vue

7:18Router, gdybyś był ciekaw. Chodzi o to, że my za moment

7:22będziemy nawigować z punktu widzenia JavaScriptu, ale Vue Router pozwala

7:26ci generować linki, czyli jeżeli tutaj przejdziemy, to

7:30możesz dodać sobie taki element router link tu i tutaj podawać ścieżkę, a

7:34tutaj tekst i Vue Router wtedy wygeneruje ci link a i w

7:38tym linku jeżeli go klikniesz, to będzie się podmieniał ten adres, więc w ten sposób można tworzyć

7:43linki. Moglibyśmy zrobić router link to, ukośnik slide. Natomiast

7:47nie będę tego robił, dlatego że ja będę zmieniał ten adres z poziomu kodu

7:51JavaScript, a nie z poziomu tej templatki HTML'owej, ale warto o tym wiedzieć jeżeli

7:56chciałbyś się pobawić z Vue Router'em. Teraz chcemy zrobić kilka rzeczy. Po

8:00pierwsze, nie ma żadnego znaczenia, że tutaj wpiszę 2, 3 i tak dalej. Nasz slider

8:05na to nie reaguje, ale chciałbym ten parametr zczytać. Nie bez powodu go tutaj podaliśmy

8:09jako dwukropek index. Można go oczywiście odczytać i można

8:13go odczytać właśnie w komponencie, który jest tutaj przypisany, czyli slideshow, zatem przejdźmy

8:18w to miejsce i przejdziemy sobie tutaj i skąd

8:22możemy wiedzieć, że zmieniło się coś tutaj na tym pasku, że ta dwójka zmieniła się na

8:26trójkę. Jeżeli byśmy sobie tutaj kliknęli ten nasz komponent slideshow. Przy

8:30okazji widzisz, że jest wstawiony przez Reuter Vue i świetne to narzędzie jest i

8:34wszystko nam pokazuje, to jeżeli go zaznaczę pod dolar vm0 go

8:38mam, to możemy tam się odwołać do route i zobacz

8:43co jest w środku. Wewnątrz będziemy mieli params i w

8:47params jest index 3, dlatego index, że w routes nazwaliśmy

8:51to dwukropek index, czyli jeszcze raz vm0, czyli u nas

8:55to będzie this dolar route params index i tutaj mamy

8:59wartość. Będę chciał ją tylko zamienić na wartość liczbową, więc my możemy na to

9:03tak naprawdę nasłuchiwać tutaj za pomocą łacza. Mieliśmy tutaj już jednego watch'a,

9:08więc dodajemy drugiego. Chce nasłuchiwać na dolar route, ale

9:13musimy to zapisać w taki sposób. Okej, w zasadzie chyba

9:18ten string tutaj nie jest konieczny, ale zostawmy to w ten sposób. W ES6

9:22ten skrótowy zapis, czyli kiedy zmieni się route, to

9:27będziemy to mieli this route params

9:31index. To co nas interesuje w naszym przypadku. No i ja wtedy

9:35jeżeli to się zmieni tutaj, będę chciał zmienić nasz slajd,

9:39czyli będę chciał wykonać metodę change slide, czyli zrobimy sobie this change slide,

9:45tylko że jeżeli tam przekaże na przykład trójkę to nam to nie zadziała, bo ona tutaj jest przycisków

9:49przyjmowała przypomnę ci minus 1. Jeżeli kliknęliśmy tutaj lub

9:53jeden, więc będziemy musieli ją lekko zmodyfikować. Będę

9:58chciał żeby ona tutaj przyjmowała jeszcze drugi parametr, ale może pierwsze ją tutaj wywołajmy. Po

10:03pierwsze będę chciał ten string trój trzy, czyli trójkę na przykład

10:07zamienić na number w ten sposób, bo wiemy, że był to string i przekaże

10:11go do metody change slide, ale chcę jeszcze przekazać drugi parametr na wartość true i

10:15teraz za pomocą tego parametru dostosujemy sobie resztę,

10:19więc chciałbym go tutaj nazwać router i domyślny parametr w ES6

10:23ustawić na false, czyli jeżeli normalnie klikamy przycisk to

10:28nie zostaje tutaj nic przekazane, bo nie zrobiliśmy tego przy kliknięciu, na przykład

10:32tutaj. Czyli będzie to miało domyślna wartość false i dostosujemy

10:36sobie to w taki oto sposób, wkleje tutaj fragment kodu. W zasadzie

10:41wystarczy zmienić jedną linijkę, czyli jeżeli router

10:46jest podany to chcemy wziąć dir minus 1. Powiedzmy, że tutaj na routerze Jest trójka,

10:50to chcemy wziąć drugi index tablicy, bo mamy od zera, 0, 1, 2, więc

10:54dlatego zrobię dir minus 1. To dir, no to będzie to co przekazane

10:59pod pierwszy parametr, czyli właśnie z tego routera. Natomiast w przeciwnym wypadku jeżeli tu jest

11:03false, to będziemy robić to, co robiliśmy wcześniej, okej. Prosta sprawa, sprawdzimy

11:07czy to ma sens. Odświeżę tutaj całkowicie od nowa i jak sprawdzić czy trzeci

11:12obrazek się teraz wczytał, przejdziemy do Vue i tutaj

11:18mamy app, musimy przejść niżej to slide i mamy tutaj, jak widzisz, nie

11:22trzeci, ale pierwszy obrazek, czyli za pierwszym wczytaniem to nie zadziałało, ale jeżeli teraz

11:26to podmienię, okej. Jakiś błąd się pojawił. Widzimy,

11:30że nie możemy odczytać index of undefined. Coś tutaj zrobiliśmy

11:35źle. Zabrakło s'ki, okej. Jeszcze raz. Ja

11:39w całości to odświeżę. Przejdziemy do Vue

11:43do slide. Obrazek jest pierwszy, ale zmieńmy go na trzeci na przykład i

11:48po zmianie tutaj, jak widać zaczyna to działać poprawnie. Trzeci

11:52obrazek się wczytał, czyli reagujemy na te zmiany. No i teraz ostatnią rzeczą, którą

11:56chciałbym zrobić będzie to, że jeżeli sobie kliknę na tą strzałkę i zmienia mi się na kolejny

12:01slajd, to tak naprawdę ja będę chciał zaktualizować również to co mamy

12:05tutaj u góry i wtedy będzie nam to działać poprawnie, a działa też wtedy jeżeli

12:09ktoś tutaj zmieni to sposób ręczny, więc teraz będziemy

12:13chcieli przejść do metody gdzie zmieniamy rzeczywiście ten slajd i momencie kiedy

12:17nam się obrazek już wczytał, tutaj to będzie mogli zrobić

12:21coś takiego this router razem a nie route

12:25tak jak zrobiłem to tutaj i następnie push, w ten

12:29sposób możemy powiedzieć, że chcemy zmienić adres url i tutaj podamy sobie

12:33ścieżkę. Będzie to, ja zrobię to w postaci takiego template string'u,

12:38bo będzie to tutaj dynamiczne, na slide i tutaj chce podstawić

12:42aktualny slajd, a wiem, że mamy go pod index plus 1, bo na tym routerze nie

12:49będziemy od zera wyświetlać, tylko właśnie od jedynki. Stąd zrobimy to w takiej formie. Jeszcze

12:54otworzę narzędzia, żeby zobaczyć czy nie ma jakiegoś błędu. Odświeżmy może to wszystko i może

12:58całkowicie od strony głównej, okej, wczytało

13:03się i teraz jeżeli tutaj zmienię obrazek, jak widzisz jest on podmieniany. Szybko

13:07nam to weszło, ale w niektórych przypadkach będzie się pojawiał preloader jeżeli połączenie

13:11będzie troszeczkę wolniejsze. Zobaczmy, jest preloader i dopiero kiedy się

13:15do wczyta podmienia nam się to w tym miejscu, ale jest jeszcze jedna zaleta tego routera. W

13:20momencie kiedy kliknę wstecz, zmieni nam się to tutaj na trójkę. Nasłuchiwaliśmy

13:25na te zmiany za pomocą watch'era. No i dzięki temu możesz

13:29zobaczyć, że zmieniają się również na nasze slajdy. Wrócę tutaj do

13:33pełnej prędkości i powiem ci, że tym sposobem zakończyliśmy podawanie naszej aplikacji. Pozostało

13:39ją tylko jeszcze zbuild'ować, żeby można było wstawić ją

13:43na serwer, bo teraz pracujemy developmencko. Mam nadzieję, że ten projekt ci się podobał. Starałem

13:48ci się pokazać jak najwięcej rzeczy, które do tej pory były plus jeszcze Axios i Vue

13:53Rauter. Natomiast w Vue Router potrafiłby dużo bardziej zaawansowany. Polecam

13:57ci, jeżeli masz tylko chęci żeby tutaj więcej o tym poczytać,

14:01ale i tak pokazałem ci na szybko najważniejsze jego koncepcje, oprócz może generowania

14:05linku za pomocą router link, bo to akurat nie było nam potrzebne, ale jak widziałeś w dokumentacji

14:10jest to bardzo proste. Zatem w ostatniej lekcji poświęconej temu

14:14projektowi, zróbmy sobie jeszcze produkcyjny build.