Vue.js রাউটিং

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

১. Vue Router ইন্সটল করা

Vue.js প্রোজেক্টে Vue Router ব্যবহারের জন্য প্রথমে এটি ইনস্টল করতে হবে। যদি আপনি Vue CLI দিয়ে প্রোজেক্ট তৈরি করে থাকেন এবং Vue Router নির্বাচন করে থাকেন, তবে এটি স্বয়ংক্রিয়ভাবে ইনস্টল হয়ে যাবে। তবে, যদি আপনি আলাদা করে Vue Router ইনস্টল করতে চান, তাহলে নিচের কমান্ডটি ব্যবহার করতে হবে:

npm install vue-router

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

Vue Router কনফিগার করার জন্য আপনাকে router ফোল্ডার তৈরি করে, সেখানে index.js ফাইল তৈরি করতে হবে। এই ফাইলে আপনি সব রাউটিং কনফিগারেশন রাখবেন।

উদাহরণ: src/router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
]

const router = new VueRouter({
  routes
})

export default router

এখানে:

• Vue.use(VueRouter): এটি Vue.js অ্যাপ্লিকেশনে Vue Router ইনস্টল ও ব্যবহার করতে ব্যবহৃত হয়।
• routes: এটি একটি অ্যারে, যেখানে প্রতিটি রাউটের কনফিগারেশন দেওয়া থাকে (যেমন path, name, এবং component)।
• path: URL পাথ যা ব্যবহারকারী ব্রাউজারে লিখলে সংশ্লিষ্ট কম্পোনেন্ট রেন্ডার হবে।
• component: এটি সেই কম্পোনেন্ট যা রাউটটির সাথে যুক্ত থাকবে।

৩. Vue Router অ্যাপ্লিকেশনে যুক্ত করা

রাউটারের কনফিগারেশন তৈরি করার পর, আপনাকে এটি আপনার মূল অ্যাপ্লিকেশনে যোগ করতে হবে। এটি main.js ফাইলে করতে হয়।

উদাহরণ: 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 // Vue Router যুক্ত করা হচ্ছে
}).$mount('#app')

এখানে router-এর মাধ্যমে আপনি Vue Router কনফিগারেশনকে অ্যাপ্লিকেশনের মধ্যে যুক্ত করেছেন।

৪. রাউটিং এ পরিবর্তন করা

এখন, আপনি যেকোনো কম্পোনেন্ট থেকে রাউটিং পরিবর্তন করতে পারেন। Vue.js-এ রাউটিং পরিবর্তন করতে $router.push() ব্যবহার করা হয়, যা ইউজারকে নির্দিষ্ট পাথে রিডাইরেক্ট করবে।

উদাহরণ:

this.$router.push('/about')

এটি ব্যবহারকারীকে /about পাথে নিয়ে যাবে।

৫. রাউটিং ব্যবহার করে কম্পোনেন্টে নেভিগেট করা

Vue.js কম্পোনেন্টের মধ্যে রাউটিং ব্যবহার করার জন্য আপনি <router-link> কম্পোনেন্ট ব্যবহার করতে পারেন, যা URL পাথে নেভিগেট করার জন্য ব্যবহৃত হয়।

উদাহরণ:

<template>
  <div>
    <h1>Vue.js অ্যাপ্লিকেশন</h1>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-view></router-view> <!-- এখানে রেন্ডার হবে কম্পোনেন্ট -->
  </div>
</template>

এখানে:

• <router-link>: এটি ইউজারকে নির্দিষ্ট রাউটে নেভিগেট করার জন্য ব্যবহৃত হয়।
• to অ্যাট্রিবিউট: এটি সেই রাউটের পাথ নির্দেশ করে যেখানে ইউজারকে নেভিগেট করতে হবে।
• <router-view>: এটি সেই জায়গা যেখানে রাউটের ভিত্তিতে কম্পোনেন্ট রেন্ডার হবে।

৬. রাউট গার্ডস (Route Guards)

Vue.js রাউটিংয়ে কিছু সময় রাউট গার্ড ব্যবহার করতে হয়, যা রাউটিংয়ের আগে বা পরে কিছু কার্যক্রম সম্পন্ন করে। এটি সাধারণত অথেনটিকেশন বা অথোরাইজেশন চেক করার জন্য ব্যবহৃত হয়।

উদাহরণ:

const router = new VueRouter({
  routes,
  beforeEach(to, from, next) {
    // যদি ইউজার লগিন না থাকে, তবে তাকে লগইন পেজে নিয়ে যাওয়া হবে
    if (!isLoggedIn && to.name !== 'Login') {
      next({ name: 'Login' })
    } else {
      next() // রাউটিং চালিয়ে যাবে
    }
  }
})

এখানে, beforeEach গার্ডটি প্রতিটি রাউটিংয়ের আগে চেক করবে এবং যদি ইউজার লগিন না থাকে তবে তাকে Login পেজে রিডাইরেক্ট করবে।

সারাংশ

Vue.js-এ রাউটিং ব্যবস্থাপনা করার জন্য 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 পাথ, কম্পোনেন্ট রেন্ডার, ডাইনামিক রাউটিং, রাউট গার্ড, এবং নেস্টেড রাউট সহ আরও অনেক ফিচার ব্যবহার করতে পারেন।

Vue.js এ রাউটিং ব্যবস্থাপনা করার জন্য Vue Router ব্যবহৃত হয়। এটি একটি শক্তিশালী লাইব্রেরি যা আপনার অ্যাপ্লিকেশনকে এক পেজ থেকে অন্য পেজে সহজে নেভিগেট করতে সাহায্য করে। Vue Router আপনাকে ইউআরএল এবং ভিউ কম্পোনেন্টের মধ্যে ম্যাপিং করার সুযোগ দেয়, যাতে অ্যাপ্লিকেশনটি একাধিক পেজ বা ভিউ নিয়ে কাজ করতে পারে।

১. Vue Router ইনস্টল করা

Vue.js প্রোজেক্টে রাউটিং ফিচার যুক্ত করার জন্য প্রথমে Vue Router ইনস্টল করতে হবে।

ইনস্টলেশন কমান্ড:

npm install vue-router

এটি Vue Router লাইব্রেরি ইনস্টল করবে।

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

Vue Router কনফিগারেশন করার জন্য আপনাকে প্রথমে রাউটার ইনস্ট্যান্স তৈরি করতে হবে এবং তারপর এটি আপনার Vue অ্যাপ্লিকেশনে যুক্ত করতে হবে। এর জন্য src/router/index.js ফাইলে রাউটিং কনফিগারেশনটি লেখা হয়।

রাউটার কনফিগারেশন ফাইল তৈরি করা:

• router/index.js ফাইলে আপনি রাউটারের সেটআপ করতে পারেন।

import Vue from 'vue';
import Router from 'vue-router';
import Home from '../views/Home.vue'; // ভিউ কম্পোনেন্ট
import About from '../views/About.vue'; // ভিউ কম্পোনেন্ট

Vue.use(Router);

const routes = [
  {
    path: '/', // হোম পেজের জন্য রুট
    name: 'Home',
    component: Home
  },
  {
    path: '/about', // অ্যাবাউট পেজের জন্য রুট
    name: 'About',
    component: About
  }
];

const router = new Router({
  routes // রাউট কনফিগারেশন
});

export default router;

এখানে:

• path: ইউআরএল পাথ যা ব্যবহারকারীরা অ্যাক্সেস করবে।
• name: রুটের নাম, এটি রাউটিং ব্যবস্থাপনায় সহায়তা করে।
• component: এটি সেই Vue কম্পোনেন্ট যা রুটের জন্য রেন্ডার হবে।

৩. Vue অ্যাপ্লিকেশনে রাউটার যোগ করা

এখন, 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 কে Vue ইনস্ট্যান্সে যুক্ত করা হয়েছে যাতে রাউটার ব্যবস্থাপনা করা যায়।

৪. Vue.js এ রাউটিং ব্যবহার করা

এখন আপনার অ্যাপ্লিকেশনে রাউটিং ব্যবহারের জন্য এবং ট্যাগ ব্যবহার করতে হবে।

• : এটি সেই জায়গা যেখানে ভিউ কম্পোনেন্টটি রেন্ডার হবে।
• : এটি ইউআরএল লিঙ্ক তৈরি করে যা ব্যবহারকারীকে অন্য পেজে নেভিগেট করবে।

উদাহরণ:

App.vue ফাইলে:

<template>
  <div id="app">
    <h1>Vue.js রাউটিং</h1>
    <nav>
      <router-link to="/">হোম</router-link> |
      <router-link to="/about">অ্যাবাউট</router-link>
    </nav>
    <router-view></router-view> <!-- এখানে ভিউ কম্পোনেন্ট রেন্ডার হবে -->
  </div>
</template>

এখানে:

• হোম: এই লিঙ্কটি ব্যবহারকারীকে হোম পেজে নিয়ে যাবে।
• : এই জায়গায় হোম বা অ্যাবাউট পেজের কম্পোনেন্ট রেন্ডার হবে।

৫. ডাইনামিক রাউটিং

Vue.js এ আপনি ডাইনামিক রাউটও ব্যবহার করতে পারেন, যেখানে ইউআরএলে প্যারামিটার পাস করা হয়। উদাহরণস্বরূপ, আপনি যদি একটি প্রোফাইল পেজ তৈরি করতে চান, যেখানে ব্যবহারকারীর আইডি দিয়ে ডেটা লোড হবে, তাহলে ডাইনামিক রাউটিং ব্যবহার করতে হবে।

ডাইনামিক রাউট কনফিগারেশন:

{
  path: '/profile/:id',
  name: 'Profile',
  component: Profile,
  props: true
}

এখানে, :id হলো ডাইনামিক প্যারামিটার যা ইউআরএল থেকে নেয়া হবে।

কম্পোনেন্টে প্যারামিটার ব্যবহার:

<template>
  <div>
    <h2>প্রোফাইল আইডি: {{ $route.params.id }}</h2>
  </div>
</template>

এখানে, $route.params.id ব্যবহার করে ডাইনামিক রাউট প্যারামিটার অ্যাক্সেস করা হয়েছে।

৬. রাউট গার্ড (Route Guard)

Vue Router এ আপনি রাউট গার্ড ব্যবহার করতে পারেন, যা রাউটিংয়ের আগে বা পরে কিছু কাজ করতে সাহায্য করে। উদাহরণস্বরূপ, আপনি লগইন চেক করতে পারেন।

উদাহরণ:

const routes = [
  {
    path: '/private',
    component: PrivatePage,
    beforeEnter: (to, from, next) => {
      if (!isLoggedIn) {
        next('/login'); // লগইন না থাকলে লগইন পেজে রিডাইরেক্ট করবে
      } else {
        next(); // রাউটিং চালিয়ে যাবে
      }
    }
  }
];

এটি ব্যবহারকারীকে রাউটিংয়ের আগে কিছু শর্ত চেক করার সুযোগ দেয়।

৭. রাউটিং কনফিগারেশন এর কিছু অন্যান্য বৈশিষ্ট্য

• Nested Routes: আপনি নেস্টেড রাউট ব্যবহার করতে পারেন, যেখানে একটি রুটের মধ্যে আরো রুট থাকে।
• Lazy Loading: Vue.js এ আপনি Lazy Loading ব্যবহার করতে পারেন যাতে কম্পোনেন্টগুলো শুধুমাত্র প্রয়োজন হলে লোড হয়, এটি অ্যাপের পারফর্ম্যান্স উন্নত করতে সাহায্য করে।

উদাহরণ:

const routes = [
  {
    path: '/home',
    component: () => import('../views/Home.vue') // Lazy Loading
  }
];

এভাবে, Vue.js এ রাউটিং কনফিগারেশন করতে পারেন এবং আপনার অ্যাপ্লিকেশনে একাধিক পেজ, ডাইনামিক রাউট, গার্ড ইত্যাদি যুক্ত করতে পারেন।

Vue.js অ্যাপ্লিকেশনে ডায়নামিক রাউটিং (Dynamic Routing) ব্যবহার করার মাধ্যমে আপনি ইউজার ইন্টারফেসের মধ্যে পরিবর্তনশীল বা ভ্যারিয়েবল রাউট তৈরি করতে পারেন। এটি বিশেষভাবে উপকারী যখন আপনি URL এর মধ্যে ডাইনামিক প্যারামিটারস (যেমন আইডি, ইউজারনেম, ক্যাটাগরি নাম) ব্যবহার করে পেজগুলোকে কাস্টমাইজ করতে চান।

১. ডায়নামিক রাউটিং কনফিগারেশন

Vue.js এর Vue Router ব্যবহার করে ডায়নামিক রাউট তৈরি করা সহজ। ডায়নামিক রাউটের মাধ্যমে আপনি URL এর মধ্যে ভ্যালু বা প্যারামিটার গ্রহণ করতে পারেন।

Vue Router কনফিগারেশন:

এটি শুরু করার জন্য, প্রথমে router/index.js ফাইলটি খুলে রাউটিং কনফিগারেশন করতে হবে। ডায়নামিক রাউট প্যারামিটার যোগ করতে, আপনি URL প্যাটার্নে কলন : চিহ্ন ব্যবহার করেন।

import Vue from 'vue';
import Router from 'vue-router';
import Home from '@/views/Home.vue';
import UserProfile from '@/views/UserProfile.vue'; // উদাহরণ

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
    },
    {
      path: '/user/:id', // :id একটি ডায়নামিক প্যারামিটার
      name: 'user-profile',
      component: UserProfile,
      props: true // প্যারামিটার কম্পোনেন্টে প্রপস হিসেবে পাঠানো হবে
    }
  ]
});

উপরের কোডে, /user/:id রুটে :id একটি ডায়নামিক প্যারামিটার, যার মান URL এর অংশ হিসেবে পরিবর্তিত হবে। উদাহরণস্বরূপ, /user/123 বা /user/johndoe।

২. ডায়নামিক প্যারামিটার ব্যবহার

একবার রাউট তৈরি হলে, আপনি কম্পোনেন্টে এই ডায়নামিক প্যারামিটারটি ব্যবহার করতে পারবেন। Vue.js রাউট কম্পোনেন্টে প্যারামিটারস প্রপস হিসেবে সরবরাহ করে।

কম্পোনেন্টে প্যারামিটার ব্যবহার করা:

<template>
  <div>
    <h1>User Profile</h1>
    <p>User ID: {{ $route.params.id }}</p>
  </div>
</template>

<script>
export default {
  name: 'UserProfile',
  created() {
    console.log('User ID:', this.$route.params.id); // কনসোলে ডায়নামিক প্যারামিটার দেখা যাবে
  }
}
</script>

এখানে, this.$route.params.id ব্যবহার করে আপনি URL থেকে ডায়নামিক প্যারামিটার id অ্যাক্সেস করতে পারবেন। এছাড়াও, Vue Router এর props: true অপশন ব্যবহার করলে প্যারামিটার সরাসরি কম্পোনেন্টের প্রপস হিসেবে পাঠানো হয়, তখন আপনি এটি props.id দিয়ে ব্যবহার করতে পারবেন।

৩. ডায়নামিক রাউট প্যারামিটারস এর সাথে কাজ করা

৩.১. প্যারামিটার ডিফল্ট ভ্যালু

আপনি যখন ডায়নামিক রাউট প্যারামিটার ব্যবহার করছেন, তখন কিছু ক্ষেত্রে আপনি ডিফল্ট ভ্যালু প্রদান করতে চাইতে পারেন। এটা করার জন্য, Vue Router এর beforeEnter গার্ড বা কম্পোনেন্টের created লাইফ সাইকেল হুক ব্যবহার করা যেতে পারে।

৩.২. প্যারামিটার পরিবর্তন

ডায়নামিক রাউট প্যারামিটার পরিবর্তন হলে, Vue.js তা পুনরায় রেন্ডার করবে। এর ফলে আপনি নতুন প্যারামিটার অনুযায়ী কম্পোনেন্টের ভ্যালু আপডেট করতে পারেন। যেমন:

this.$router.push({ name: 'user-profile', params: { id: 456 } });

এটি id=456 প্যারামিটার সহ user-profile রাউটে নেভিগেট করবে।

৪. নেস্টেড ডায়নামিক রাউটিং

যখন আপনি একটি ডায়নামিক রুটের ভিতরে আরো ডায়নামিক রাউট ব্যবহার করতে চান, তখন নেস্টেড রাউটিং (Nested Routing) ব্যবহার করতে পারেন। এতে প্যারামিটার ভ্যালুগুলি পারেন্ট রুট থেকে চাইল্ড রুটে প্রপস হিসেবে পাঠানো হয়।

উদাহরণ (নেস্টেড রাউট):

import UserProfile from '@/views/UserProfile.vue';
import UserPosts from '@/views/UserPosts.vue';

export default new Router({
  routes: [
    {
      path: '/user/:id',
      component: UserProfile,
      children: [
        {
          path: 'posts', // নেস্টেড রুট
          component: UserPosts,
        }
      ]
    }
  ]
});

এখানে, /user/:id/posts রুটটি একটি নেস্টেড রুট হিসেবে কাজ করবে, যেখানে প্যারামিটার id প্রাপ্ত হবে এবং চাইল্ড কম্পোনেন্টে প্রপস হিসেবে পাঠানো হবে।

৫. প্যারামিটার এবং কুয়েরি প্যারামিটারস

Vue.js এ ডায়নামিক প্যারামিটারস (যেমন :id) এবং কুয়েরি প্যারামিটারস (যেমন ?page=1) উভয়কেই ব্যবহার করা যায়। কুয়েরি প্যারামিটারস আপনার রুটের পরে ? চিহ্ন দিয়ে নির্ধারিত হয় এবং আপনি এগুলো this.$route.query দিয়ে অ্যাক্সেস করতে পারেন।

কুয়েরি প্যারামিটার ব্যবহার:

// URL: /user/123?page=2
created() {
  console.log('User ID:', this.$route.params.id); // 123
  console.log('Page:', this.$route.query.page); // 2
}

এখানে, this.$route.params.id থেকে ডায়নামিক প্যারামিটার এবং this.$route.query.page থেকে কুয়েরি প্যারামিটার পাওয়া যাবে।

সারাংশ

• ডায়নামিক রাউটিং আপনাকে URL প্যাটার্নে পরিবর্তনশীল প্যারামিটার ব্যবহার করতে সহায়তা করে।
• প্যারামিটার গুলি $route.params এর মাধ্যমে কম্পোনেন্টে অ্যাক্সেস করা যায়।
• নেস্টেড রাউটিং ব্যবহার করে আপনি প্যারামিটারগুলি প্যারেন্ট থেকে চাইল্ড কম্পোনেন্টে প্রপস হিসেবে পাঠাতে পারেন।
• কুয়েরি প্যারামিটারস ব্যবহার করে আপনি URL এর মাধ্যমে অতিরিক্ত তথ্য পাঠাতে পারেন, যা this.$route.query এর মাধ্যমে অ্যাক্সেস করা যায়।

Vue.js এর Vue Router আপনাকে সহজে বিভিন্ন পেজ বা ভিউ মধ্যে নেভিগেট করার সুবিধা দেয়, এবং Nested Routes এবং Lazy Loading এই প্রক্রিয়াকে আরও কার্যকরী এবং স্কেলেবল করে তোলে। এই দুটি বৈশিষ্ট্য কিভাবে কাজ করে এবং কিভাবে এগুলো ব্যবহৃত হয় তা নিচে বিস্তারিতভাবে আলোচনা করা হলো।

১. Nested Routes (নেস্টেড রাউটস)

Nested Routes ব্যবহার করে আপনি Vue Router এর মধ্যে একটি রাউটের অধীনে আরেকটি রাউট বা ভিউ তৈরি করতে পারেন। অর্থাৎ, একটি রাউটের মধ্যে অন্য একটি রাউট অবস্থিত থাকে। এটি একটি হায়ারারকিকাল রাউটিং কাঠামো তৈরি করে, যা পেজের মধ্যে বিভিন্ন সেকশন বা সাব-পেজ তৈরি করতে সাহায্য করে।

Nested Routes এর উদাহরণ:

// router/index.js
import Vue from 'vue';
import Router from 'vue-router';

import Home from '@/components/Home';
import About from '@/components/About';
import UserProfile from '@/components/UserProfile';
import UserSettings from '@/components/UserSettings';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      component: Home
    },
    {
      path: '/about',
      component: About
    },
    {
      path: '/user',
      component: UserProfile,  // Parent route
      children: [
        {
          path: 'settings',  // Nested route
          component: UserSettings
        }
      ]
    }
  ]
});

এখানে, /user রাউটের অধীনে একটি settings রাউট রয়েছে। যখন /user/settings URL টি লোড হবে, তখন Vue Router স্বয়ংক্রিয়ভাবে UserSettings কম্পোনেন্ট রেন্ডার করবে এবং UserProfile কম্পোনেন্টটি তার মধ্যে একটি ভিউ হিসেবে রেন্ডার হবে।

Nested Routes এর টেমপ্লেট:

<!-- UserProfile.vue -->
<template>
  <div>
    <h2>User Profile</h2>
    <router-view></router-view> <!-- Here nested routes will be rendered -->
  </div>
</template>

এখানে router-view ব্যবহার করে নেস্টেড রাউটের কম্পোনেন্টটি রেন্ডার করা হয়েছে।

২. Lazy Loading (জরুরী সময়ের জন্য ডিলেড লোডিং)

Lazy Loading হল একটি কৌশল, যার মাধ্যমে আপনি Vue.js এর কম্পোনেন্টগুলো তখনই লোড করেন যখন সেগুলো প্রয়োজন হয়। এতে প্রথমে শুধুমাত্র অ্যাপের প্রয়োজনীয় অংশ লোড হয় এবং পরবর্তীতে অন্য কম্পোনেন্টগুলি ইউজার ইন্টারঅ্যাকশনের মাধ্যমে ধাপে ধাপে লোড করা হয়। এটি অ্যাপের লোড টাইম এবং পারফরম্যান্স বাড়াতে সহায়তা করে।

Vue.js এ Lazy Loading এক্সটেনশন বা dynamic import ব্যবহার করে কার্যকরভাবে ইনপ্লিমেন্ট করা হয়। Vue Router এর সাথে Lazy Loading কম্পোনেন্টের মাধ্যমে খুব সহজে এটি করা সম্ভব।

Lazy Loading এর উদাহরণ:

// router/index.js
import Vue from 'vue';
import Router from 'vue-router';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      component: () => import('@/components/Home')  // Lazy Loaded
    },
    {
      path: '/about',
      component: () => import('@/components/About')  // Lazy Loaded
    },
    {
      path: '/user',
      component: () => import('@/components/UserProfile'),  // Lazy Loaded
      children: [
        {
          path: 'settings',
          component: () => import('@/components/UserSettings')  // Lazy Loaded
        }
      ]
    }
  ]
});

এখানে, () => import('@/components/ComponentName') ব্যবহৃত হয়েছে, যা কম্পোনেন্টগুলো Lazy Load করতে সাহায্য করে। এর মাধ্যমে প্রথমে শুধুমাত্র রুট কম্পোনেন্টটি লোড হবে এবং পরবর্তী কম্পোনেন্টগুলো ইউজারের ইন্টারঅ্যাকশন অনুযায়ী ডাইনামিকভাবে লোড হবে।

Lazy Loading এবং Code Splitting:

Lazy Loading স্বয়ংক্রিয়ভাবে Code Splitting তৈরি করে, যার মাধ্যমে কম্পোনেন্টগুলো আলাদা আলাদা জাভাস্ক্রিপ্ট চাঙ্কে বিভক্ত হয়। এইভাবে অ্যাপ্লিকেশনটি দ্রুত লোড হয় এবং পারফরম্যান্স বাড়ে।

৩. Lazy Loading এবং Nested Routes

এটি নেস্টেড রাউটসের সাথে Lazy Loading ব্যবহার করার একটি সাধারণ পদ্ধতি। এটি Vue অ্যাপ্লিকেশনের স্কেলেবিলিটি বাড়াতে এবং সেরা পারফরম্যান্স পেতে সহায়তা করে।

Lazy Loading with Nested Routes উদাহরণ:

// router/index.js
import Vue from 'vue';
import Router from 'vue-router';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      component: () => import('@/components/Home')
    },
    {
      path: '/about',
      component: () => import('@/components/About')
    },
    {
      path: '/user',
      component: () => import('@/components/UserProfile'),
      children: [
        {
          path: 'settings',
          component: () => import('@/components/UserSettings')
        }
      ]
    }
  ]
});

এখানে, /user/settings রাউটের জন্য Lazy Loading ব্যবহৃত হয়েছে, যা এই রাউটটি লোড হওয়ার সময় কম্পোনেন্টটি ডাইনামিকভাবে লোড হবে।

সারাংশ

• Nested Routes: Vue Router এ আপনি রাউটগুলিকে নেস্ট করতে পারেন, যা আপনার অ্যাপ্লিকেশনকে হায়ারারকিক্যালভাবে সিস্টেম্যাটিক রাউটিং ব্যবস্থায় পরিণত করে।
• Lazy Loading: এটি একটি পারফরম্যান্স অপটিমাইজেশন কৌশল, যা কম্পোনেন্টগুলো তখনই লোড করে যখন সেগুলো প্রয়োজন হয়, ফলে অ্যাপ্লিকেশনটি দ্রুত লোড হয় এবং সেরা পারফরম্যান্স পাওয়া যায়।
• Lazy Loading with Nested Routes: Lazy Loading এবং Nested Routes একসাথে ব্যবহার করলে অ্যাপ্লিকেশনটি আরও কার্যকরী ও স্কেলেবল হয়, কারণ আপনি ছোট ছোট অংশে ডেটা লোড করতে পারেন।

এভাবে Vue.js এর Nested Routes এবং Lazy Loading ব্যবহার করে আপনি আপনার অ্যাপ্লিকেশনকে আরও দ্রুত, স্কেলেবল এবং রেসপন্সিভ করতে পারবেন।