Jassif Team Institution

Vue Routing

Vue-তে রাউটিং Vue অ্যাপ্লিকেশন নেভিগেট করতে ব্যবহৃত হয় এবং এটি সম্পূর্ণ পৃষ্ঠা পুনরায় লোড ছাড়াই ক্লায়েন্ট সাইডে (ব্রাউজার) হয়, যার ফলে ব্যবহারকারীর অভিজ্ঞতা দ্রুততর হয়।

রাউটিং হল নেভিগেশনের একটি পদ্ধতি, যেভাবে আমরা আগে গতিশীল উপাদান ব্যবহার করতাম।

রাউটিং এর মাধ্যমে, আমরা আমাদের Vue অ্যাপে কাউকে একটি নির্দিষ্ট স্থানে নির্দেশ করতে একটি URL ঠিকানা ব্যবহার করতে পারি।

একটি গতিশীল উপাদান ব্যবহার করে নেভিগেশন

Vue-তে রাউটিং বোঝার জন্য, আসুন প্রথমে একটি অ্যাপ্লিকেশন দেখি যা দুটি উপাদানের মধ্যে পরিবর্তন করতে একটি গতিশীল উপাদান ব্যবহার করে।

আপনি বোতামগুলি ব্যবহার করে উপাদানগুলির মধ্যে স্যুইচ করতে পারেন:

<template>
    <h1>Food!</h1>
    <p>I like most types of food.</p>
</template>

AnimalCollection.vue:

<template>
    <h1>Animals!</h1>
    <p>I want to learn about at least one new animal every year.</p>
</template>

App.vue:

<template>
  <p>Choose what part of this page you want to see:</p>
  <button @click="activeComp = 'animal-collection'">Animals</button>
  <button @click="activeComp = 'food-items'">Food</button><br>
  <div>
    <component :is="activeComp"></component>
  </div>
</template>

<script>
export default {
  data() {
      return {
        activeComp: ''
      }
    }
}
</script>

ডাইনামিক কম্পোনেন্ট থেকে রাউটিং পর্যন্ত

আমরা Vue এর সাথে SPA (একক পৃষ্ঠার অ্যাপ্লিকেশন) তৈরি করি, যার মানে আমাদের অ্যাপ্লিকেশনটিতে শুধুমাত্র একটি *.html ফাইল রয়েছে। তার মানে আমরা আমাদের পৃষ্ঠায় বিভিন্ন বিষয়বস্তু প্রদর্শনের জন্য অন্য *.html ফাইলগুলিতে লোকেদের নির্দেশ দিতে পারি না।

উপরের উদাহরণে, আপনি পৃষ্ঠার বিভিন্ন বিষয়বস্তুর মধ্যে নেভিগেট করতে পারেন, তবে আপনি অন্য কাউকে সরাসরি খাদ্য বিভাগে আসার জন্য একটি ঠিকানা প্রদান করতে পারবেন না, তবে আপনি রাউটিং দিয়ে এটি করতে পারেন।

যদি রাউটিং সঠিকভাবে সেট আপ করা হয়, যদি আপনি URL ঠিকানায় একটি এক্সটেনশন সহ একটি Vue অ্যাপ্লিকেশন খোলেন, উদাহরণস্বরূপ "/food", আপনাকে সরাসরি খাদ্য সামগ্রী ধারণকারী বিভাগে নিয়ে যাওয়া হবে।

Vue রাউটার লাইব্রেরি ইনস্টল করা হচ্ছে

আপনার কম্পিউটারে Vue-তে রাউটিং ব্যবহার করতে, আপনার প্রকল্প ফোল্ডারে টার্মিনাল ব্যবহার করে Vue রাউটার লাইব্রেরি ইনস্টল করুন:

npm install vue-router@4

main.js আপডেট করা হচ্ছে

রাউটিং ব্যবহার করার জন্য আমাদের একটি রাউটার তৈরি করতে হবে এবং আমরা এটি main.js ফাইলে করি।

import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'

import App from './App.vue'
import FoodItems from './components/FoodItems.vue'
import AnimalCollection from './components/AnimalCollection.vue'

const router = createRouter({
    history: createWebHistory(),
    routes: [
        { path: '/animals', component: AnimalCollection },
        { path: '/food', component: FoodItems },
    ]
});

const app = createApp(App)

app.use(router);
app.component('food-items', FoodItems);
app.component('animal-collection', AnimalCollection);

app.mount('#app')

রাউটারের কার্যকারিতা যোগ করতে লাইন 2, 8-14 এবং 18 যোগ করা হয়েছে।

লাইন 19-20 মুছে ফেলা হয়েছে কারণ উপাদানগুলি ইতিমধ্যে রাউটারের 11-12 লাইনে যোগ করা হয়েছে।

আমরা এখন একটি রাউটার তৈরি করেছি যেটি, উদাহরণস্বরূপ, মূল URL ঠিকানার শেষে '/animals' যোগ করা হলে 'AnimalCollection' উপাদান খুলতে পারে, কিন্তু পরবর্তী বিভাগে <router-view> উপাদান যোগ না করা পর্যন্ত এটি কাজ করবে না। রাউটারটি ওয়েব ইতিহাসেরও ট্র্যাক রাখে, তাই আপনি সাধারণত URL-এর পাশে ওয়েব ব্রাউজারের উপরের বাম কোণে তীর দিয়ে ইতিহাসে পিছনে এবং এগিয়ে যেতে পারেন।

<রাউটার-ভিউ> উপাদান ব্যবহার করে

আমাদের পৃষ্ঠার বিষয়বস্তুকে নতুন রাউটার দিয়ে প্রতিস্থাপন করতে, আমাদের আগের উদাহরণ থেকে গতিশীল উপাদানটি সরিয়ে <রাউটার-ভিউ> উপাদান দিয়ে প্রতিস্থাপন করতে হবে।

<template>
  <p>Choose what part of this page you want to see:</p>
  <button @click="activeComp = 'animal-collection'">Animals</button>
  <button @click="activeComp = 'food-items'">Food</button><br>
  <div>
    <router-view></router-view>
    <component :is="activeComp"></component>
  </div>
</template>

আপনি যদি আপনার কম্পিউটারে উপরের পরিবর্তনটি করে থাকেন, তাহলে আপনি আপনার প্রকল্প পৃষ্ঠার URL-এ '/food' যোগ করতে পারেন এবং খাদ্য সামগ্রী প্রদর্শন করতে পৃষ্ঠাটি রিফ্রেশ করা উচিত, যেমন:

<রাউটার-লিঙ্ক> উপাদান ব্যবহার করে

রাউটারের সাথে আরও ভাল কাজ করার জন্য বোতামগুলিকে <রাউটার-লিঙ্ক> উপাদান দিয়ে প্রতিস্থাপন করা যেতে পারে।

আমাদের আর 'activeComp' ডেটা অ্যাট্রিবিউটের প্রয়োজন নেই, তাই আমরা এটি মুছে ফেলতে পারি, এবং প্রকৃতপক্ষে সম্পূর্ণ <script> ট্যাগ, যেহেতু এটি খালি।

<template>
  <p>Choose what part of this page you want to see:</p>
  <router-link to="/animals">Animals</router-link>
  <router-link to="/food">Food</router-link><br>
  <div>
    <router-view></router-view>
  </div>
</template>

<script></script>

<রাউটার-লিঙ্ক> উপাদানের স্টাইল

<রাউটার-লিঙ্ক> উপাদানটি একটি <a> ট্যাগ হিসাবে রেন্ডার করা হয়। ব্রাউজারে উপাদানটিতে ডান-ক্লিক করে এবং এটি পরিদর্শন করে আপনি দেখতে পারেন:

আপনি উপরের স্ক্রিনশটটিতে দেখতে পাচ্ছেন, Vue কোন উপাদানটি সক্রিয় তা ট্র্যাক রাখে এবং সক্রিয় <router-link> উপাদানে একটি 'রাউটার-লিঙ্ক-সক্রিয়' ক্লাস বরাদ্দ করে (এখন একটি <a> ট্যাগ হিসাবে রেন্ডার করা হয়েছে)।

কোন <router-link> এলিমেন্ট সক্রিয় তা হাইলাইট করার জন্য উপরের তথ্যটি স্টাইল করতে ব্যবহার করা যেতে পারে:

<template>
  <p>Choose what part of this page you want to see:</p>
  <router-link to="/animals">Animals</router-link>
  <router-link to="/food">Food</router-link><br>
  <div>
    <router-view></router-view>
  </div>
</template>

<style scoped>
  a {
    display: inline-block;
    background-color: black;
    border: solid 1px black;
    color: white;
    padding: 5px;
    margin: 10px;
  }
  a:hover,
  a.router-link-active {
    background-color: rgb(110, 79, 13);
  }
  div {
    border: dashed black 1px;
    padding: 20px;
    margin: 10px;
    display: inline-block;
  }
</style>

Vue রাউটিং টিউটোরিয়াল

Vue-তে রাউটিং 'main.js' ফাইলে সেট করা আছে।

নিচের শূন্যস্থান পূরণ করুন যাতে রুটটি সফলভাবে তৈরি হয়।

import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'

import App from './App.vue'
import FishTypes from './components/FishTypes.vue'

const router = createRouter({
    history: createWebHistory(),
    routes: [
        { 
_____: '/fish', 
_____: FishTypes }
    ]
});

const app = createApp(App)
app.use(router);
app.mount('#app')

উন্নত রাউটিং বৈশিষ্ট্য

রাউটার কনফিগারেশন বিকল্প

প্রোগ্রাম্যাটিক নেভিগেশন

বোতাম বা লিঙ্কে ক্লিক করা ছাড়া আপনি উপাদানগুলির মধ্যে প্রোগ্রাম্যাটিকভাবে নেভিগেট করতে পারেন:

<script>
export default {
  methods: {
    goToHome() {
      // Using router instance
      this.$router.push('/')
    },
    
    goBack() {
      // Go back in history
      this.$router.go(-1)
    },
    
    goToUser(userId) {
      // Navigate with parameters
      this.$router.push({ path: `/user/${userId}` })
      
      // Or using named route
      this.$router.push({ name: 'user', params: { id: userId } })
    }
  }
}
</script>

রাউটিং সেরা অভ্যাস

// Lazy loading example
const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      name: 'home',
      component: () => import('./views/Home.vue')
    },
    {
      path: '/about',
      name: 'about',
      component: () => import('./views/About.vue')
    },
    // Catch-all route for 404
    {
      path: '/:pathMatch(.*)*',
      name: 'not-found',
      component: () => import('./views/NotFound.vue')
    }
  ]
})