Routing ​

Client-Side vs. Server-Side Routing ​

সার্ভার সাইডে রাউটিং মানে সার্ভার ব্যবহারকারীর ভিজিট করা URL পাথের উপর ভিত্তি করে একটি রেসপন্স পাঠাচ্ছে। যখন আমরা একটি প্রথাগত সার্ভার-রেন্ডার করা ওয়েব অ্যাপের একটি লিঙ্কে ক্লিক করি, তখন ব্রাউজার সার্ভার থেকে একটি HTML রেসপন্স পায় এবং নতুন HTML সহ পুরো পৃষ্ঠাটি পুনরায় লোড করে।

একটি একক-পৃষ্ঠার অ্যাপ্লিকেশন (SPA), তবে, ক্লায়েন্ট-সাইড জাভাস্ক্রিপ্ট নেভিগেশন বাধা দিতে পারে, গতিশীলভাবে নতুন ডেটা আনতে পারে, এবং পুরো পৃষ্ঠা পুনরায় লোড না করে বর্তমান পৃষ্ঠা আপডেট করুন। এটি সাধারণত একটি আরও চটজলদি ব্যবহারকারীর অভিজ্ঞতার ফলাফল করে, বিশেষত বাস্তব "অ্যাপ্লিকেশন" এর মতো ব্যবহারের ক্ষেত্রে, যেখানে ব্যবহারকারী দীর্ঘ সময়ের মধ্যে অনেকগুলি মিথস্ক্রিয়া সম্পাদন করবে বলে আশা করা হয়।

এই জাতীয় এসপিএগুলিতে, ব্রাউজারে ক্লায়েন্টের দিকে "রাউটিং" করা হয়। একটি ক্লায়েন্ট-সাইড রাউটার ব্রাউজার API যেমন History API বা hashchange] ব্যবহার করে অ্যাপ্লিকেশনটির রেন্ডার করা দৃশ্য পরিচালনা করার জন্য দায়ী ইভেন্ট।

Official Router ​

Vue SPA নির্মাণের জন্য উপযুক্ত। বেশিরভাগ SPA-এর জন্য, আনুষ্ঠানিকভাবে-সমর্থিত Vue Router লাইব্রেরি ব্যবহার করার পরামর্শ দেওয়া হয়। আরও বিস্তারিত জানার জন্য, Vue রাউটারের ডকুমেন্টেশন দেখুন।

Simple Routing from Scratch ​

আপনার যদি খুব সাধারণ রাউটিং প্রয়োজন হয় এবং আপনি একটি পূর্ণ-বৈশিষ্ট্যযুক্ত রাউটার লাইব্রেরি অন্তর্ভুক্ত করতে না চান, তাহলে আপনি ডাইনামিক কম্পোনেন্ট দিয়ে তা করতে পারেন এবং বর্তমান কম্পোনেন্টের অবস্থা আপডেট করুন ব্রাউজারে শোনা hashchange ইভেন্ট অথবা History API ব্যবহার করে। ।

এখানে একটি উদাহরণ:

<script setup>
import { ref, computed } from 'vue'
import Home from './Home.vue'
import About from './About.vue'
import NotFound from './NotFound.vue'

const routes = {
  '/': Home,
  '/about': About
}

const currentPath = ref(window.location.hash)

window.addEventListener('hashchange', () => {
  currentPath.value = window.location.hash
})

const currentView = computed(() => {
  return routes[currentPath.value.slice(1) || '/'] || NotFound
})
</script>

<template>
  <a href="#/">Home</a> | <a href="#/about">About</a> |
  <a href="#/non-existent-path">Broken Link</a>
  <component :is="currentView" />
</template>

<script>
import Home from './Home.vue'
import About from './About.vue'
import NotFound from './NotFound.vue'

const routes = {
  '/': Home,
  '/about': About
}

export default {
  data() {
    return {
      currentPath: window.location.hash
    }
  },
  computed: {
    currentView() {
      return routes[this.currentPath.slice(1) || '/'] || NotFound
    }
  },
  mounted() {
    window.addEventListener('hashchange', () => {
      this.currentPath = window.location.hash
    })
  }
}
</script>

<template>
  <a href="#/">Home</a> | <a href="#/about">About</a> |
  <a href="#/non-existent-path">Broken Link</a>
  <component :is="currentView" />
</template>