Vue Router হল Vue SPAs-এর জন্য অফিসিয়াল ক্লায়েন্ট-সাইড রাউটার। এটি URLs-কে কম্পোনেন্টে ম্যাপ করে এবং সম্পূর্ণ পৃষ্ঠা পুনরায় লোড ছাড়াই তাদের প্রতিস্থাপন করে এবং নেভিগেশন গার্ড প্রদান করে যা নেভিগেশনের আগে লজিক (যেমন অথ চেক) চালায়।
{ 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 হল canonical অথ-গেটিং প্যাটার্ন।
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>
]}
ইতিরিক্ত: রুট প্যারামিটার, কোয়েরি স্ট্রিং, নেমড রুট, স্ক্রল বিহেভিয়ার এবং কোড স্প্লিটিংয়ের জন্য lazy-লোডেড রুট কম্পোনেন্ট।
Vue Router যেকোনো মাল্টি-পেজ Vue SPA-এর জন্য অপরিহার্য — এটি ক্লায়েন্ট-সাইড নেভিগেশন (দ্রুত, কোন রিলোড নেই), ডাইনামিক/নেস্টেড রুট এবং RouterLink/RouterView প্রদান করে।
নেভিগেশন গার্ড হল ক্রস-কাটিং চিন্তাভাবনার জন্য মূল বৈশিষ্ট্য: অথ দ্বারা সুরক্ষিত রুট গেটিং, পেজ ভিউ লগিং, এবং অসংরক্ষিত ফর্ম থেকে দূরে নেভিগেশন প্রতিরোধ।
meta + গ্লোবাল beforeEach প্যাটার্ন অথেনটিকেশনের জন্য প্রায় প্রতিটি রিয়েল অ্যাপ প্রয়োগ করে এমন কিছু।