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 प्रदान करते.
नेव्हिगेशन गार्ड्स क्रॉस-कटिंग समस्यांचे मुख्य वैशिष्ट्य आहे: ऑथ द्वारे सुरक्षित रूट्स गेट करणे, पृष्ठ दृश्य लॉगिंग, आणि असंरक्षित फॉर्मपासून दूर नेव्हिगेशन रोखणे.
meta + ग्लोबल beforeEach पॅटर्न ऑथेंटिकेशनसाठी हे काहीतरी आहे जे जवळजवळ प्रत्येक वास्तविक ऍप्लिकेशन लागू करते.