Routing w Vue.js – przewodnik po Vue Router

Vue.js jest jednym z najpopularniejszych frameworków JavaScript, który ułatwia tworzenie interaktywnych aplikacji internetowych. Jednym z kluczowych aspektów każdej aplikacji jest system routingu, który umożliwia nawigację między różnymi stronami lub widokami. W przypadku Vue.js, system ten jest obsługiwany przez bibliotekę o nazwie Vue Router.

• Czym jest Vue Router?
• Instalacja Vue Router
• Konfiguracja Vue Router
• Nawigacja z Vue Router
• Dynamiczny routing
• Nawigacja programistyczna
• Kontrola nawigacji
• Historia nawigacji
• Podsumowanie

Czym jest Vue Router?

Vue Router to oficjalna biblioteka routingu dla Vue.js. Umożliwia ona mapowanie komponentów na określone ścieżki URL, co pozwala na dynamiczne renderowanie różnych widoków bez konieczności przeładowania strony.

const router = VueRouter.createRouter({  history: VueRouter.createWebHashHistory(),  routes: [    { path: '/', component: Home },    { path: '/about', component: About },  ],})

Jak widać powyżej, ścieżki są mapowane na komponenty przy użyciu tablicy routes, która jest przekazywana do instancji routera podczas jej tworzenia.

• Zobacz także: Podstawy Vue – tworzenie interaktywnych interfejsów
• Animacje w Vue.js: Efekty dla Interfejsu Użytkownika

Instalacja Vue Router

Instalacja Vue Router jest prosta i szybka. Można go zainstalować za pomocą menedżera pakietów npm lub yarn, wykonując następujące polecenie:

npm install vue-router@4# lubyarn add vue-router@4

Konfiguracja Vue Router

Po zainstalowaniu Vue Router, musimy go skonfigurować w naszej aplikacji. Poniżej znajduje się przykładowy kod konfiguracji routera:

// 1. Definiowanie komponentów, które będą używane jako widokiconst Home = { template: '<div>Strona główna</div>' }const About = { template: '<div>O nas</div>' }// 2. Definiowanie ścieżekconst routes = [  { path: '/', component: Home },  { path: '/about', component: About }]// 3. Tworzenie instancji routeraconst router = VueRouter.createRouter({  history: VueRouter.createWebHashHistory(),  routes})// 4. Dodanie routera do aplikacji Vueconst app = Vue.createApp({})app.use(router)app.mount('#app')

Nawigacja z Vue Router

Vue Router udostępnia komponent router-link, który umożliwia tworzenie linków nawigacyjnych. Aby wygenerować link, wystarczy przekazać ścieżkę do atrybutu to:

<router-link to="/">Strona główna</router-link><router-link to="/about">O nas</router-link>

Dynamiczny routing

Dynamiczny routing to potężny koncept, który pozwala na tworzenie bardziej złożonych ścieżek. Jest to szczególnie przydatne, gdy chcemy wyświetlać różne widoki w zależności od określonego parametru w URL.

const routes = [  { path: '/', component: Home },  { path: '/about', component: About },  { path: '/user/:id', component: User },]

W powyższym przykładzie, :id to dynamiczny segment ścieżki, który może przyjmować różne wartości. Komponent User będzie renderowany dla każdej ścieżki pasującej do wzorca /user/:id.

Nawigacja programistyczna

Oprócz nawigacji za pomocą linków, Vue Router umożliwia również nawigację programistyczną. Możemy to zrobić za pomocą metody push dostępnej na instancji routera:

router.push('/about')

Kontrola nawigacji

Vue Router umożliwia precyzyjną kontrolę nad nawigacją za pomocą tzw. strażników nawigacji (navigation guards). Strażniki nawigacji to funkcje, które są wywoływane przed wejściem na daną trasę, co pozwala na wykonywanie dodatkowej logiki, takiej jak sprawdzanie czy użytkownik jest zalogowany.

router.beforeEach((to, from, next) => {  if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })  else next()})

Historia nawigacji

Vue Router obsługuje trzy tryby historii: HTML5, hash i memory. Tryb HTML5 wykorzystuje History API do manipulacji historią przeglądarki, hash korzysta z fragmentów URL, a memory przechowuje historię w pamięci i nie wpływa na URL.

Podsumowanie

Vue Router to potężne narzędzie, które umożliwia tworzenie skomplikowanych systemów routingu w aplikacjach Vue.js. Dzięki jego elastycznemu API, możliwości są niemal nieograniczone. Czy to prosty system routingu, czy zaawansowany system z dynamicznym routingiem, kontrolą nawigacji i różnymi trybami historii – Vue Router jest gotowy na wszystko.