ভিউ রাউটার সেটাপ – ১

ভিউ এর প্রোজেক্টে রাউট বানানো এবং ব্যবহার করার জন্য vue-router নামক vue এর একটি অফিসিয়াল প্যাকেজ ব্যবহার করতে হবে। 

প্যাকেজটি ইনস্টল করার জন্য –  

Npm 

npm install vue-router@4

অথবা 

Yarn 

yarn add vue-router@4

এখানে @4 হল প্যাকেজের ভার্সন। এটা না দিলেও সমস্যা নেই। সেক্ষেত্রে vue-router প্যাকেজের সর্বশেষ stable version টা ইনস্টল হবে। 

এবার আমাদের কাজ হল একটা মূল রাউটার ফাইল বানানো। src ফোল্ডারের মধ্যে router নামে একটি ফোল্ডার তৈরি করে তার মধ্যে router.js ফাইল তৈরি করতে হবে। 

অর্থাত ফাইল পাথ হবে এরকম, src/router/router.js

Router.js ফাইলের কোডঃ 

import { createRouter, createWebHistory } from 'vue-router'
import HelloWorld from '../components/HelloWorld.vue'
import About from '../components/About.vue'
import Contact from '../components/Contact.vue'
const routes = [
    { path: '/', component: HelloWorld },
    { path: '/about', component: About },
    { path: '/contact', component: Contact },
]
const router= createRouter({
    history: createWebHistory(),
    routes
})
export default router

উপরের কোডে createRouter এবং createWebHistory নামক মেথড দুইটা vue-router প্যাকেজ থেকে ইম্পোর্ট করা হয়েছে। createRouter মেথডের মাধ্যমে vue এর রাউট গুলো ইনিশিয়ালাইজ হবে। এবং createWebHistory মেথডের মাধ্যমে রাউটগুলো SEO Friendly ফরম্যাটে তৈরি হবে। মানে /blog/post/1 এরকম ফরম্যাটে হবে। createWebHistory মেথডের পরিবর্তে createWebHashHistory ব্যবহার করা যেত। কিন্তু সেক্ষেত্রে url ফরম্যাট হত এরকম /#blog যেটা একদম ই SEO Friendly না। 

Const routes এর মধ্যে সাইটের সকল রাউটার ডিফাইন করা আছে এরে হিসেবে। এরের প্রত্যেকটা এলিমেন্টে একটি করে অব্জেক্ট আছে যার মধ্যে route name এবং কোন কম্পোনেন্ট  লোড হবে তার নাম আছে। 

ফাইনালি const router এর মধ্যে রাউটার কে ইনিশিয়ালাইজ করে ডিফল্ট এক্সপোর্ট করা হইছে। 

এখন এই রাউটার কে main.js ফাইলে রেজিস্টার করতে হবে। 

import { createApp } from 'vue'
import './style.css'
import router from './router/router'
import App from './App.vue'
createApp(App).use(router).mount('#app')

রাউট থেকে প্রাপ্ত ডায়নামিক কম্পনেন্টকে যেখানে শো করাতে চাই সেখানে  <router-view/> অথবা <RouterView> এর মাধ্যমে শো করাতে পারি। 

নর্মালি app.vue এর মধ্যে শো করানো হয়। সেক্ষেত্রে আমাদের app.vue কোড হবে এরকম।

<script setup>
</script>
<template>
  <router-view/>
</template>

এখন ব্রাউজার URL বার থেকে রাউটকে কল করলে রাউটার ফাইল থেকে নির্দিষ্ট কম্পনেন্ট লোড করে শো করবে। 

রাউটের মাধ্যমে কোন ডায়নামিক ডাটাকে প্যারামিটার হিসেবে পাস করতে চাইলে- 

import { createRouter, createWebHistory } from 'vue-router'
import HelloWorld from '../components/HelloWorld.vue'
import About from '../components/About.vue'
import Contact from '../components/Contact.vue'
import Post from '../components/Post.vue'
const routes = [
    { path: '/', component: HelloWorld },
    { path: '/about', component: About },
    { path: '/contact', component: Contact },
    { path: '/post/:id', component: Post }
]

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

export default router

এই ডায়নামিক প্যারামিটারকে ভিউ কম্পোনেন্ট টেমপ্লেট থেকে ধরতে চাইলে {{ $router.params.id }} এভাবে ধরা যায়। 

<script setup>
</script>
<template>
    <h2>This is post page</h2>
    <h3>Post id is {{ $route.params.id }}</h3>
</template> 
<style></style>

কিন্তু টেমপ্লেট script থেকে ধরতে চাইলে এভাবে হবেনা। তখন import { useRoute } from ‘vue-router’; এভাবে useRoute মেথড কে আগে ইম্পোর্ট করে নিতে হবে। এবং useRouter মেথডকে ইনিশিয়ালাইজ করে নিতে হবে এভাবে const route = useRoute()। 

<script setup>
import {ref, reactive, onBeforeMount} from 'vue'
import { useRoute } from 'vue-router';
const route = useRoute()
const post = reactive({
    title:''
})

onBeforeMount(()=>{
    fetch(`https://dummyjson.com/posts/${route.params.id}`)
    .then(response => response.json())
    .then(json => {
        post.title = json.title
    })
})
</script>
<template>
    <h2>This is post page</h2>
    <h3>Post id is {{ $route.params.id }}</h3>
    <h3>Post title is {{ post.title }}</h3>
</template>
<style></style>

URL এর প্যারামিটার কে আমরা ? চিহ্নের মাধ্যমে অপশনাল প্যারামিটারে রূপান্তর করতে পারি। সেক্ষেত্রে URL এর মাধ্যমে প্যারামিটার পাস না করলেও ঠিক রাউটে কাজ করবে। 

তখন আমাদের router.js দেখতে হবে এমন – 

import { createRouter, createWebHistory } from 'vue-router'
import HelloWorld from '../components/HelloWorld.vue'
import About from '../components/About.vue'
import Contact from '../components/Contact.vue'
import Post from '../components/Post.vue'
const routes = [
    { path: '/', component: HelloWorld },
    { path: '/about', component: About },
    { path: '/contact', component: Contact },
    { path: '/post/:id?', component: Post }
]

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

এবং এই অপশনাল প্যারামিটারের এভেইলেবলিটির উপর ভিত্তির করে আমরা API কল করাকে কন্ডিশনাল করতে পারি। 

যেমন- 

<script setup>
import { ref, reactive, onBeforeMount } from 'vue'
import { useRoute } from 'vue-router';
const route = useRoute()
const post = reactive({
    title: ''
})

onBeforeMount(() => {
    if (route.params.id == undefined) {
        return
    }
    fetch(`https://dummyjson.com/posts/${route.params.id}`)
        .then(response => response.json())
        .then(json => {
            post.title = json.title
        })
})
</script>

অনেক সময় আমাদের এমন দরকার হয়, একটি পেজে/কম্পোনেন্ট এর ভিতর আরেকটি পেজ/কম্পোনেন্ট শো করানো। এবং এটাও হবে ডায়নামিক রাউট চেঞ্জের মাধ্যমে। তখন এটাকে বলে নেস্টেড রাউটিং। 

import { createRouter, createWebHistory } from 'vue-router'
import HelloWorld from '../components/HelloWorld.vue'
import About from '../components/About.vue'
import Contact from '../components/Contact.vue'
import Post from '../components/Post.vue'
import User from '../components/User.vue'
import UserProfile from '../components/UserProfile.vue'
import UserSchedule from '../components/UserSchedule.vue'
const routes = [
    { path: '/', component: HelloWorld },
    { path: '/about', component: About },
    { path: '/contact', component: Contact },
    { path: '/post/:id?', component: Post },
    {
        path: '/user/:id',
        component: User,
        children: [
            { path: 'profile', component: UserProfile },
            { path: 'schedule', component: UserSchedule },
        ]
    },
]
const router = createRouter({
    history: createWebHistory(),
    routes
})
export default router

এখানে user/id রাউটের ভিতর আরো দুইটা চাইল্ড রাউট আছে যারা ইউজার পেজের ভিতরেই সেইম রাউটে থাকাবস্থায় profile এবং settings পেজ শো করবে। 

দেখে আসি আমাদের user কম্পনেন্ট এর ভিতরের কোড কেমন হবে – 

<script setup>
</script>
<template>
    <h2>User Profile Page</h2>
    <h2>User ID = {{ $route.params.id }}</h2>
    <router-view></router-view>
</template>    
<style></style>

সর্বশেষ, 404 পেজ শো করানো। যদি URL এর মাধ্যমে এমন কোন রাউট কল করা হয় যা বাস্তবে নেই তাহলে ডিফল্টভাবে একটি 404 শো করাতে হবে। সেক্ষেত্রে আমাদের সামান্য একটু রেগুলার এক্সপ্রেশন ইউজ করতে হবে। router.js ফাইলে। 

Router.js ফাইলটা দেখতে হবে এমন – 

import { createRouter, createWebHistory } from 'vue-router'
import HelloWorld from '../components/HelloWorld.vue'
import About from '../components/About.vue'
import Contact from '../components/Contact.vue'
import NotFound from '../components/NotFound.vue'
const routes = [
    { path: '/', component: HelloWorld },
    { path: '/about', component: About },
    { path: '/contact', component: Contact },
    { path: '/:pathMatch(.*)*', component: NotFound },
]

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

export default router

Components ফোল্ডারের ভিতর আমরা একটি NotFound.vue নামক কম্পোনেন্ট তৈরি করব যেখানে 404 পেজের ডিজাইন করা থাকবে। কোন রাউট খুজে পাওয়া না গেলে বাই ডিফল্ট এই কম্পোনেন্ট শো করবে।