Vue Router পরিচিতি

Vue Router হল Vue.js এর অফিশিয়াল রাউটিং লাইব্রেরি, যা আপনাকে একক পেজ অ্যাপ্লিকেশন (SPA) তৈরি করতে সাহায্য করে। Vue Router ব্যবহার করে আপনি আপনার Vue.js অ্যাপ্লিকেশনে বিভিন্ন পেজ বা ভিউগুলোর মধ্যে রাউটিং করতে পারবেন, এবং অ্যাপের ইউআরএল ঠিকানার সাথে সম্পর্কিত ভিউগুলো সঠিকভাবে রেন্ডার করতে পারবেন।

Vue Router এর মাধ্যমে আপনি SPA অ্যাপ্লিকেশনগুলিতে বিভিন্ন কম্পোনেন্টের মধ্যে নেভিগেশন পরিচালনা করতে পারেন, যেখানে পুরো পেজটি রিফ্রেশ না হয়ে শুধুমাত্র প্রয়োজনীয় ভিউ বা কম্পোনেন্ট পরিবর্তিত হয়। এটি একদম দ্রুত এবং ইউজার ফ্রেন্ডলি নেভিগেশন প্রদান করে।

Vue Router এর প্রয়োজনীয়তা

1. একক পেজ অ্যাপ্লিকেশন (SPA): Vue Router আপনাকে একক পেজ অ্যাপ্লিকেশন তৈরি করতে সহায়তা করে, যেখানে শুধুমাত্র প্রয়োজনীয় অংশের কন্টেন্ট পরিবর্তন হয়, পেজ রিফ্রেশ হয় না।
2. ন্যাভিগেশন ম্যানেজমেন্ট: Vue Router আপনাকে URL-এর সাথে সম্পর্কিত ভিউ বা পেজ কনটেন্ট রেন্ডার করতে সাহায্য করে, এবং বিভিন্ন রাউটের জন্য বিভিন্ন ভিউ নির্ধারণ করতে পারে।
3. পারামিটারাইজড রাউট: আপনি URL প্যারামিটারস ব্যবহার করে ডাইনামিক কন্টেন্ট রেন্ডার করতে পারবেন। যেমন, একটি নির্দিষ্ট আইডি বা কিওয়ারি প্যারামিটার ব্যবহার করে কোনো ডেটা প্রদর্শন করা।
4. নেস্টেড রাউটস: আপনি একাধিক স্তরের রাউট ব্যবহার করে নেস্টেড রাউট তৈরি করতে পারবেন, যেখানে সাব-রাউটগুলি প্রধান রাউটের মধ্যে প্রদর্শিত হবে।
5. গার্ডস: Vue Router ব্যবহার করে আপনি রাউটিং গার্ডস সেট করতে পারেন, যা নির্দিষ্ট রাউটে নেভিগেট করার আগে কিছু চেক করতে সাহায্য করে (যেমন, ইউজার অথেনটিকেশন চেক করা)।

Vue Router এর প্রধান বৈশিষ্ট্য

1. Declarative Routing: Vue Router আপনাকে ডিক্লারেটিভ রাউটিং প্রদান করে, যেখানে আপনি ইউআরএল এবং ভিউ কম্পোনেন্টের মধ্যে সম্পর্ক স্পষ্টভাবে ঘোষণা করতে পারেন।
2. Dynamic Routing: Vue Router ডাইনামিক রাউটিং সাপোর্ট করে, যেখানে আপনি রাউট প্যারামিটার ব্যবহার করে নির্দিষ্ট ডেটা বা কন্টেন্ট লোড করতে পারেন।
3. Nested Routes: আপনি রাউটগুলিকে একে অপরের মধ্যে নেস্ট করতে পারেন, যা বিশেষ করে বড় অ্যাপ্লিকেশনগুলিতে কার্যকর।
4. Named Routes: Vue Router আপনাকে রাউটের নাম ব্যবহার করে রুটিং করতে সক্ষম করে, যা URL গঠন সহজ এবং পরিষ্কার রাখে।
5. Route Guards: আপনি রাউট গার্ড ব্যবহার করে ইউজার অথেনটিকেশন, অথরাইজেশন চেক করতে পারেন বা অ্যাপের মধ্যে কোনো নির্দিষ্ট কন্ডিশন চেক করতে পারেন।
6. History Mode: Vue Router দুটি মোডে কাজ করতে পারে:
   • Hash mode: URL-এর মধ্যে # ব্যবহার করে রাউটিং।
   • History mode: URL-এ শুধুমাত্র সোজা পাথ থাকে (যেমন, /about), যা ইউজার ফ্রেন্ডলি এবং SEO-র জন্য ভাল।

Vue Router এর মূল অংশ

1. Router Instance: Vue Router ব্যবহারের প্রথম ধাপ হল একটি Router instance তৈরি করা, যা অ্যাপ্লিকেশনের রাউটিং কনফিগারেশন ধারণ করবে। এটি new VueRouter() দিয়ে তৈরি করা হয়।
2. Routes Array: রাউট কনফিগারেশন routes অ্যারে হিসেবে সংজ্ঞায়িত করা হয়, যেখানে প্রতিটি রাউটের জন্য একটি URL পাথ এবং তার সাথে সম্পর্কিত কম্পোনেন্ট দেওয়া থাকে।
3. Router View: Vue অ্যাপে router-view কম্পোনেন্ট ব্যবহার করে আপনি নির্দিষ্ট রাউটের জন্য রেন্ডার করতে চান এমন কম্পোনেন্টটি প্রদর্শন করতে পারেন।

Vue Router কনফিগারেশন উদাহরণ

এখন, আসুন একটি সাধারণ Vue Router কনফিগারেশন দেখার জন্য কিছু কোড উদাহরণ দেখি:

১. Vue Router ইনস্টলেশন

প্রথমে, Vue Router ইনস্টল করতে হবে:

npm install vue-router

২. Router কনফিগারেশন

router/index.js:

import Vue from 'vue';
import Router from 'vue-router';
import Home from '@/components/Home.vue';
import About from '@/components/About.vue';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/about',
      name: 'About',
      component: About
    }
  ]
});

৩. Vue অ্যাপে Router ব্যবহার করা

src/main.js:

import Vue from 'vue';
import App from './App.vue';
import router from './router';

Vue.config.productionTip = false;

new Vue({
  render: h => h(App),
  router
}).$mount('#app');

৪. router-view ব্যবহার

src/App.vue:

<template>
  <div id="app">
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>

    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App'
};
</script>

সারাংশ

Vue Router একটি অত্যন্ত গুরুত্বপূর্ণ টুল যা Vue.js অ্যাপ্লিকেশনে রাউটিং এবং নেভিগেশন পরিচালনা করতে ব্যবহৃত হয়। এটি SPA (Single Page Application) তৈরি করার জন্য বিশেষভাবে ডিজাইন করা হয়েছে, যা ইউজারকে দ্রুত, স্মুথ এবং ইন্টারেক্টিভ অভিজ্ঞতা প্রদান করে। Vue Router এর মাধ্যমে আপনি URL পাথ, কম্পোনেন্ট রেন্ডার, ডাইনামিক রাউটিং, রাউট গার্ড, এবং নেস্টেড রাউট সহ আরও অনেক ফিচার ব্যবহার করতে পারেন।