Vue Router Vue SPA ల కోసం అధికారిక క్లయింట్-సైడ్ రౌటర్. ఇది URLలను భాగాలకు మ్యాప్ చేస్తుంది మరియు వాటిని పూర్తి పేజీ రీలోడ్ల లేకుండా స్వ్యాప్ చేస్తుంది, మరియు నావిగేషన్కు ముందు లాజిక్ (ఆత్మీయతా తనిఖీల వంటి) నిర్వహించడానికి నావిగేషన్ గార్డులను అందిస్తుంది.
{ 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), లేదా తిరిగి దర్శించవచ్చు (ఒక ప్రదేశాన్ని చేస్తాయి). 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>
]}
ప్లస్: రూట్ పారామితులు, ప్రశ్న స్ట్రింగ్లు, పేరుగా ఉన్న రూట్లు, స్క్రోల్ ప్రవర్తన, మరియు కోడ్ విభజన కోసం సక్రియం-లోడ్ చేసిన రూట్ భాగాలు.
Vue Router ఏ బహుళ-పేజీ Vue SPA కోసం చాలా ముఖ్యమైనది — ఇది క్లయింట్-సైడ్ నావిగేషన్ (వేగంగా, ఎటువంటి రీలోడ్లు లేవు), డైనమిక్/నెస్టెడ్ రూట్లు, మరియు RouterLink/RouterView ను అందిస్తుంది।
నావిగేషన్ గార్డులు క్రాస్-కటింగ్ సమస్యల కోసం కీ లక్షణం: ఆత్మీయతా ద్వారా సంరక్షిత రూట్లను గేటింగ్ చేయడం, పేజీ వీక్షణలను లాగ్ చేయడం, మరియు సేవ్ చేయని రూపాల నుండి దూరంగా నావిగేషన్ను నిరోధించడం.