Vue Router hija r-router uffiċjali tal-banda tal-kliyent għal Vue SPA. Hija timmappa URL-i għal komponenti u tbidilhom mingħajr irriċargar sħiħ tal-paġna, u tipprovdi gwardji tal-navigazzjoni biex tħaddem il-loġika (bħal ċekks auth) qabel in-navigazzjoni.
{ createRouter, createWebHistory } ;
routes = [
{ : , : },
{ : , : },
{ : , : (),
: { : } },
];
router = ({ : (), routes });
<template>
<RouterLink to="/users/42">Profile</RouterLink> <!-- declarative navigation -->
<RouterView /> <!-- where the matched component renders -->
</template>
<script setup>
import { useRoute, useRouter } from "vue-router";
const route = useRoute(); // read current route: route.params.id, route.query
const router = useRouter(); // navigate programmatically: router.push("/home")
</script>
// global guard — runs before EVERY navigation (great for auth)
router.beforeEach((to, from) => {
const authed = useAuthStore().isLoggedIn;
if (to.meta.requiresAuth && !authed) {
return "/login"; // redirect: return a path (or false to cancel)
}
// returning true / nothing → allow the navigation
});
Il-gwardji jirċievu to (rotta ta' mira) u from (kurrenti), u jistgħu jagħtu permess, ikkanċellaw (false), jew irredirizzaw (irtorna lokazzjoni). Il-bandiera meta.requiresAuth + globali beforeEach hija l-mudell kanonik tal-gward auth.
Global: router.beforeEach / afterEach — every navigation (auth, analytics)
Per-route: beforeEnter in the route config — specific routes
In-component: onBeforeRouteLeave — e.g. "unsaved changes, leave?" prompts
{ path: "/settings", component: Settings, children: [
{ path: "profile", component: Profile }, // → /settings/profile, renders in nested <RouterView>
]}
Plus: parametri tar-rotta, strings ta' query, rotta msemmija, imġiba tal-ikkroll, u komponenti ta' rotta ċċarjati pigriżement għat-taqsima tal-kodiċi.
Vue Router hija essenzjali għal kwalunkwe Vue SPA ta' multipaġna — tipprovdi navigazzjoni tal-banda tal-kliyent (mabgħuła, mingħajr rriċargar), rotta dinamika/nested, u RouterLink/RouterView.
Il-gwardji tal-navigazzjoni huma l-karatteristika ewlenija għal imħassasjet li jaqtgħu l-frontieri: ingibed rotta protetta permezz auth, irrekordjar ta' viewz tal-paġna, u prevenzjoni tal-navigazzjoni mill-formoli li ma jkunux salvati.
Il-mudell ta' meta + globali beforeEach għal awtentikazzjoni hija xi ħaġa li kważi kull applikazzjoni reali timplimenta.