مسیریابی - Routing ​

مسیریابی سمت کلاینت در برابر مسیریابی سمت سرور ​

routing در سمت سرور به این معنی است که سرور بر اساس مسیر URL که کاربر آن را درخواست کرده است، یک پاسخ ارسال می‌کند. زمانی که روی یک لینک در یک برنامه وب سنتی که در سمت سرور رندر می‌شود کلیک می‌کنیم، مرورگر HTML جدیدی از سرور دریافت می‌کند و کل صفحه را با HTML جدید مجدداً بارگذاری می‌کند.

اما در یک برنامه تک‌صفحه‌ای (SPA)، جاوااسکریپت در سمت کلاینت می‌تواند routing را انجام دهد، به صورت پویا داده‌های جدید بگیرد و صفحه فعلی را بدون بارگذاری مجدد کامل صفحه، به‌روزرسانی کند. این معمولا منجر به تجربه کاربری سریع‌تر می‌شود، به ویژه برای موارد استفاده‌ای که بیشتر شبیه به "برنامه" واقعی هستند، جایی که انتظار می‌رود کاربر تعاملات زیادی را در مدت زمان استفاده از برنامه انجام دهد.

در چنین SPA‌ هایی، "routing" در سمت کلاینت، در مرورگر انجام می‌شود. یک router (مسیریاب) در سمت کلاینت مسئول مدیریت view رندر شده برنامه با استفاده از API‌های مرورگر مانند History API یا رویداد hashchange است.

مسیریاب رسمی | Official Router ​

Vue برای ساختن SPA ‌ها بسیار مناسب است. برای اکثر SPA‌ ها، استفاده از کتابخانه رسمی Vue Router توصیه می‌شود. برای جزئیات بیشتر، مستندات Vue Router را ببینید.

مسیریابی ساده از ابتدا | Simple Routing from Scratch ​

اگر فقط به یک routing بسیار ساده نیاز دارید و نمی‌خواهید از یک کتابخانه router کامل استفاده کنید، می‌توانید از Dynamic Components و به‌روزرسانی state کامپوننت فعلی با گوش دادن به رویدادهای 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>