Vue.js patří mezi nejoblíbenější progresivní frameworky JavaScript používané při vytváření uživatelských rozhraní. Primárně se používá pro vytváření jednostránkových aplikací. Jednou z výrazných funkcí, které Vue.js poskytuje, je knihovna Vue Router, která umožňuje vývoj vysoce interaktivních webových aplikací. V tomto článku se hlouběji ponoříme do toho, jak Vue Router funguje.
Ve světě vývoje webu hraje směrování klíčovou roli při nasměrování uživatelů z jedné stránky na druhou, udržování stavu aplikace, zatímco uživatel naviguje, líné načítání stránek pro zvýšení výkonu a mnoho dalšího. Vue Router v těchto úkolech vyniká, takže pro vývojáře je snadné vytvářet dynamičtější a složitější aplikace.
Základy routeru Vue
Vue Router je v podstatě a plugin Vue.js které můžete zahrnout do svých aplikací Vue.js. Umožňuje mapovat odlišné adresy URL na různé komponenty, podobně jako se adresy URL mapují na různé stránky v tradičních vykreslovaných aplikacích na straně serveru.
//A simple route configuration
const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
]
// Create the router instance and pass the `routes` option
const router = new VueRouter({
routes // short for `routes: routes`
})
// Create and mount the root instance.
const app = new Vue({
router
}).$mount('#app')
Ve výše uvedeném příkladu jsme nastavili dvě trasy. Když je adresa URL '/foo', vykreslí se komponenta Foo, a když je '/bar', vykreslí se komponenta Bar.
Navigace na různé stránky
Vue Router poskytuje `
// Using `router-link` component for navigation <router-link to="/foo">Go to Foo</router-link> <router-link to="/bar">Go to Bar</router-link>
Kliknutí na tyto odkazy změní adresu URL a komponentu, která se vykresluje.
Programatická navigace
Někdy možná potřebujeme dynamičtější způsob navigace mezi stránkami, často založený na aplikační logice. Vue Router nabízí funkci „push“, která umožňuje programově navigovat z jedné stránky na druhou.
// Navigating programmatically
router.push('/foo')
Tento řádek kódu má stejný účinek jako kliknutí na `
Stručně řečeno, Vue Router je výkonný nástroj v ekosystému Vue.js, který zjednodušuje vývoj a ovládání navigace jednostránkových aplikací. Ať už jde o mapování různých adres URL na různé komponenty nebo ovládání navigace z logiky vaší aplikace, Vue Router otevírá nové způsoby, jak rozvíjet vaše aplikace Vue.js.
