Vue Router এর মাধ্যমে Routing এবং Navigation

Framework7-এ Vue.js এর সাথে Vue Router ব্যবহার করে আপনার অ্যাপ্লিকেশনের রাউটিং এবং নেভিগেশন পরিচালনা করা সহজ এবং কার্যকর। Vue Router একটি শক্তিশালী রাউটিং লাইব্রেরি যা Vue.js অ্যাপ্লিকেশনের জন্য ডিজাইন করা হয়েছে এবং এটি Framework7-এর সাথে seamlessly কাজ করতে পারে।

আগে যা জানা প্রয়োজন

• Framework7 + Vue.js প্রজেক্ট সেটআপ করা আছে।
• Node.js এবং NPM ইনস্টল করা আছে।
• Vue Router সম্পর্কে কিছুটা ধারণা আছে।

ধাপ ১: নতুন Framework7 + Vue প্রজেক্ট তৈরি করা

যদি আপনার ইতিমধ্যে Framework7 + Vue প্রজেক্ট না থাকে, তাহলে Framework7 CLI ব্যবহার করে একটি নতুন প্রজেক্ট তৈরি করুন:

framework7 create

প্রম্পট অনুযায়ী Framework7 with Vue.js নির্বাচন করুন এবং অন্যান্য প্রয়োজনীয় অপশনগুলি নির্বাচন করুন।

ধাপ ২: Vue Router ইনস্টল করা

Framework7 CLI দিয়ে প্রজেক্ট তৈরি করার পর, Vue Router ইনস্টল করা প্রয়োজন হতে পারে। সাধারণত, Framework7 CLI ইতিমধ্যে Vue Router ইনস্টল করে দেয়, তবে নিশ্চিত হওয়ার জন্য নিচের কমান্ডটি চালাতে পারেন:

npm install vue-router@4

ধাপ ৩: Vue Router কনফিগার করা

src/router/index.js (অথবা যেখানে আপনার রাউটার ফাইল থাকে) ফাইলে Vue Router কনফিগার করুন।

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

import { createRouter, createWebHistory } from 'vue-router';
import HomePage from '../pages/HomePage.vue';
import AboutPage from '../pages/AboutPage.vue';
import ContactPage from '../pages/ContactPage.vue';

const routes = [
  {
    path: '/',
    name: 'Home',
    component: HomePage,
  },
  {
    path: '/about',
    name: 'About',
    component: AboutPage,
  },
  {
    path: '/contact',
    name: 'Contact',
    component: ContactPage,
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

ধাপ ৪: মূল অ্যাপ ফাইলে Router যুক্ত করা

src/main.js (অথবা যেখানে আপনার মূল জাভাস্ক্রিপ্ট ফাইল থাকে) ফাইলে Vue Router ইন্টিগ্রেট করুন।

উদাহরণ: src/main.js

import { createApp } from 'vue';
import Framework7 from 'framework7/lite-bundle';
import Framework7Vue from 'framework7-vue';
import App from './App.vue';
import router from './router';

// Framework7 Styles
import 'framework7/css/framework7.bundle.css';

// Create Vue App
const app = createApp(App);

// Use Framework7 and Vue
app.use(Framework7Vue);

// Use Router
app.use(router);

// Mount the App
app.mount('#app');

ধাপ ৫: App.vue এ Router View ব্যবহার করা

App.vue ফাইলে <router-view> কম্পোনেন্ট ব্যবহার করুন যেখানে আপনার পেজগুলি রেন্ডার হবে।

উদাহরণ: src/App.vue

<template>
  <f7-app>
    <f7-view main>
      <router-view></router-view>
    </f7-view>
  </f7-app>
</template>

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

<style>
/* আপনার স্টাইল এখানে */
</style>

ধাপ ৬: পেজ কম্পোনেন্ট তৈরি করা

আপনার পেজগুলি তৈরি করুন যা রাউটার দ্বারা রেন্ডার করা হবে। উদাহরণস্বরূপ, HomePage.vue, AboutPage.vue, এবং ContactPage.vue তৈরি করুন।

উদাহরণ: src/pages/HomePage.vue

<template>
  <f7-page>
    <f7-navbar title="Home" />
    <f7-block>
      <p>Welcome to the Home Page!</p>
      <f7-button @click="goToAbout">Go to About</f7-button>
    </f7-block>
  </f7-page>
</template>

<script>
export default {
  name: 'HomePage',
  methods: {
    goToAbout() {
      this.$router.push({ name: 'About' });
    },
  },
};
</script>

<style scoped>
/* আপনার স্টাইল এখানে */
</style>

উদাহরণ: src/pages/AboutPage.vue

<template>
  <f7-page>
    <f7-navbar title="About" />
    <f7-block>
      <p>This is the About Page.</p>
      <f7-button @click="goToContact">Go to Contact</f7-button>
    </f7-block>
  </f7-page>
</template>

<script>
export default {
  name: 'AboutPage',
  methods: {
    goToContact() {
      this.$router.push({ name: 'Contact' });
    },
  },
};
</script>

<style scoped>
/* আপনার স্টাইল এখানে */
</style>

উদাহরণ: src/pages/ContactPage.vue

<template>
  <f7-page>
    <f7-navbar title="Contact" />
    <f7-block>
      <p>This is the Contact Page.</p>
      <f7-button @click="goHome">Go to Home</f7-button>
    </f7-block>
  </f7-page>
</template>

<script>
export default {
  name: 'ContactPage',
  methods: {
    goHome() {
      this.$router.push({ name: 'Home' });
    },
  },
};
</script>

<style scoped>
/* আপনার স্টাইল এখানে */
</style>

ধাপ ৭: নেভিগেশন এবং রাউটিং ব্যবহার করা

Vue Router ব্যবহার করে নেভিগেশন করা খুবই সহজ। আপনি বিভিন্ন পেজে যাওয়ার জন্য this.$router.push() বা <router-link> ব্যবহার করতে পারেন।

উদাহরণ: <router-link> ব্যবহার করা

<template>
  <f7-page>
    <f7-navbar title="Home" />
    <f7-block>
      <p>Welcome to the Home Page!</p>
      <router-link to="/about">
        <f7-button>Go to About</f7-button>
      </router-link>
    </f7-block>
  </f7-page>
</template>

উদাহরণ: this.$router.push() ব্যবহার করা

methods: {
  goToAbout() {
    this.$router.push({ name: 'About' });
  },
}

ধাপ ৮: নেভিগেশন গার্ডস ব্যবহার করা (ঐচ্ছিক)

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

উদাহরণ: রাউট গার্ড সেটআপ

// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import HomePage from '../pages/HomePage.vue';
import AboutPage from '../pages/AboutPage.vue';
import ContactPage from '../pages/ContactPage.vue';
import LoginPage from '../pages/LoginPage.vue';

const routes = [
  { path: '/', name: 'Home', component: HomePage },
  { path: '/about', name: 'About', component: AboutPage },
  { path: '/contact', name: 'Contact', component: ContactPage, meta: { requiresAuth: true } },
  { path: '/login', name: 'Login', component: LoginPage },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

// নেভিগেশন গার্ড
router.beforeEach((to, from, next) => {
  const isAuthenticated = false; // আপনার authentication লজিক এখানে
  if (to.meta.requiresAuth && !isAuthenticated) {
    next({ name: 'Login' });
  } else {
    next();
  }
});

export default router;

ধাপ ৯: পেজ ট্রানজিশন কাস্টমাইজ করা

Vue Router ব্যবহার করে পেজ ট্রানজিশন কাস্টমাইজ করা যায়। Framework7 এর সাথে এটি মিলে যায় এবং আরও আকর্ষণীয় করে তোলা যায়।

উদাহরণ: কাস্টম পেজ ট্রানজিশন

<template>
  <f7-app>
    <f7-view main>
      <router-view v-slot="{ Component }">
        <transition name="custom-fade">
          <component :is="Component" />
        </transition>
      </router-view>
    </f7-view>
  </f7-app>
</template>

<style>
.custom-fade-enter-active, .custom-fade-leave-active {
  transition: opacity 0.5s;
}
.custom-fade-enter-from, .custom-fade-leave-to {
  opacity: 0;
}
</style>

ধাপ ১০: উদাহরণ এবং সম্পূর্ণ কোড

সম্পূর্ণ উদাহরণ: src/App.vue

<template>
  <f7-app>
    <f7-view main>
      <router-view></router-view>
    </f7-view>
  </f7-app>
</template>

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

সম্পূর্ণ উদাহরণ: src/main.js

import { createApp } from 'vue';
import Framework7 from 'framework7/lite-bundle';
import Framework7Vue from 'framework7-vue';
import App from './App.vue';
import router from './router';

// Framework7 Styles
import 'framework7/css/framework7.bundle.css';

// Create Vue App
const app = createApp(App);

// Use Framework7 and Vue
app.use(Framework7Vue);

// Use Router
app.use(router);

// Mount the App
app.mount('#app');

সম্পূর্ণ উদাহরণ: src/router/index.js

import { createRouter, createWebHistory } from 'vue-router';
import HomePage from '../pages/HomePage.vue';
import AboutPage from '../pages/AboutPage.vue';
import ContactPage from '../pages/ContactPage.vue';
import LoginPage from '../pages/LoginPage.vue';

const routes = [
  { path: '/', name: 'Home', component: HomePage },
  { path: '/about', name: 'About', component: AboutPage },
  { path: '/contact', name: 'Contact', component: ContactPage, meta: { requiresAuth: true } },
  { path: '/login', name: 'Login', component: LoginPage },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

// Navigation Guard
router.beforeEach((to, from, next) => {
  const isAuthenticated = false; // Replace with your auth logic
  if (to.meta.requiresAuth && !isAuthenticated) {
    next({ name: 'Login' });
  } else {
    next();
  }
});

export default router;

সম্পূর্ণ উদাহরণ: src/pages/HomePage.vue

<template>
  <f7-page>
    <f7-navbar title="Home" />
    <f7-block>
      <p>Welcome to the Home Page!</p>
      <f7-button @click="goToAbout">Go to About</f7-button>
      <f7-button @click="goToContact">Go to Contact</f7-button>
    </f7-block>
  </f7-page>
</template>

<script>
export default {
  name: 'HomePage',
  methods: {
    goToAbout() {
      this.$router.push({ name: 'About' });
    },
    goToContact() {
      this.$router.push({ name: 'Contact' });
    },
  },
};
</script>

<style scoped>
/* আপনার স্টাইল এখানে */
</style>

সম্পূর্ণ উদাহরণ: src/pages/AboutPage.vue

<template>
  <f7-page>
    <f7-navbar title="About" />
    <f7-block>
      <p>This is the About Page.</p>
      <f7-button @click="goToHome">Go to Home</f7-button>
    </f7-block>
  </f7-page>
</template>

<script>
export default {
  name: 'AboutPage',
  methods: {
    goToHome() {
      this.$router.push({ name: 'Home' });
    },
  },
};
</script>

<style scoped>
/* আপনার স্টাইল এখানে */
</style>

সম্পূর্ণ উদাহরণ: src/pages/ContactPage.vue

<template>
  <f7-page>
    <f7-navbar title="Contact" />
    <f7-block>
      <p>This is the Contact Page.</p>
      <f7-button @click="goToHome">Go to Home</f7-button>
    </f7-block>
  </f7-page>
</template>

<script>
export default {
  name: 'ContactPage',
  methods: {
    goToHome() {
      this.$router.push({ name: 'Home' });
    },
  },
};
</script>

<style scoped>
/* আপনার স্টাইল এখানে */
</style>

সম্পূর্ণ উদাহরণ: src/pages/LoginPage.vue

<template>
  <f7-page>
    <f7-navbar title="Login" />
    <f7-block>
      <p>Please log in to continue.</p>
      <f7-button @click="login">Login</f7-button>
    </f7-block>
  </f7-page>
</template>

<script>
export default {
  name: 'LoginPage',
  methods: {
    login() {
      // আপনার লগইন লজিক এখানে
      // লগইন সফল হলে, অ্যাপের স্টেট আপডেট করুন
      // এবং হোম পেজে নেভিগেট করুন
      this.$router.push({ name: 'Home' });
    },
  },
};
</script>

<style scoped>
/* আপনার স্টাইল এখানে */
</style>

Vue Router ব্যবহার করে Framework7-এ রাউটিং এবং নেভিগেশন কনফিগার করা খুবই সহজ। এটি আপনাকে একটি সুশৃঙ্খল এবং মডুলার অ্যাপ্লিকেশন তৈরি করতে সাহায্য করে, যেখানে বিভিন্ন পেজ এবং কম্পোনেন্টগুলি সহজেই নেভিগেট করা যায়। এই গাইডে উল্লেখিত ধাপগুলি অনুসরণ করে আপনি দ্রুত এবং কার্যকরভাবে Framework7 + Vue.js অ্যাপ্লিকেশনে Vue Router ইন্টিগ্রেট করতে পারবেন।

অতিরিক্ত টিপস

1. নেস্টেড রাউটস (Nested Routes):
   আপনার অ্যাপ্লিকেশনে নেস্টেড রাউটস ব্যবহার করতে পারেন, যেখানে একটি পেজের মধ্যে আরেকটি পেজ লোড করা হয়।
2. ডায়নামিক রাউটস (Dynamic Routes):
   ইউজার-নির্দিষ্ট পেজ বা ডেটা লোড করার জন্য ডায়নামিক রাউটস ব্যবহার করুন।
3. নেভিগেশন গার্ডস (Navigation Guards):
   ইউজার অথেন্টিকেশন এবং অথরাইজেশন ম্যানেজমেন্টের জন্য নেভিগেশন গার্ডস ব্যবহার করুন।
4. কাস্টম ট্রানজিশন:
   অ্যাপ্লিকেশনের ইউজার এক্সপেরিয়েন্স উন্নত করতে কাস্টম ট্রানজিশন এবং অ্যানিমেশন যুক্ত করুন।