ডায়নামিক রাউটিং এবং প্যারামিটারস

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 এর মাধ্যমে অ্যাক্সেস করা যায়।