Vue Router არის Vue SPA-ების ოფიციალური კლიენტის მხარის მარშრუტიზატორი. ის აერთიანებს URL-ებს კომპონენტებთან და ცვლის მათ სრული გვერდის გადატვირთვის გარეშე, და უზრუნველყოფს ნავიგაციის დამცველებს ლოგიკის (მაგალითად auth შემოწმების) გაშვებისთვის ნავიგაციამდე.
{ 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
});
დამცველი იღებს to (სამიზნე მარშრუტი) და from (ამჟამინდელი), და შეიძლება დაშვება, გაუქმება (false), ან გადამისამართება (location-ის დაბრუნება). ფლაგი meta.requiresAuth + გლობალური beforeEach არის ავთენტიკაციის კარიბჭის კანონიკური ნიმუში.
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>
]}
გარდა ამისა: მარშრუტის პარამეტრები, query strings, დასახელებული მარშრუტები, scroll ქცევა, და lazy-loaded მარშრუტის კომპონენტები code splitting-ისთვის.
Vue Router აუცილებელია ნებისმიერი მრავალი გვერდის Vue SPA-სთვის — ის უზრუნველყოფს კლიენტის მხარის ნავიგაციას (სწრაფი, გადატვირთვის გარეშე), დინამიური/ჩასწორებული მარშრუტები, და RouterLink/RouterView.
ნავიგაციის დამცველი არის ძირითადი ფუნქცია კროს-cutting concerns-ის აღმოსავლეთ: დაცული მარშრუტების კარიბჭე auth-ით, page views-ის logging, და ნავიგაციის თავიდან აცილება დაზოგული ფორმებიდან.
meta + გლობალური beforeEach ნიმუში ავთენტიკაციისთვის არის ის, რასაც თითქმის ყველა რეალური აპი განხორციელებს.