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 এ রাউটিং কনফিগারেশন করতে পারেন এবং আপনার অ্যাপ্লিকেশনে একাধিক পেজ, ডাইনামিক রাউট, গার্ড ইত্যাদি যুক্ত করতে পারেন।
