التوجيه ​

التوجيه من جانب الخادوم مقابل التوجيه من جانب المستخدم ​

التوجيه من جانب الخادوم يعني أن الخادوم يرسل إجابة استنادًا إلى مسار URL الذي يزوره المستخدم. عندما ننقر على رابط في تطبيق ويب معروض من قبل الخادوم التقليدي ، يتلقى المتصفح إجابة HTML من الخادوم ويعيد تحميل الصفحة بأكملها مع HTML الجديد.

لكن في التطبيق أحادي الصفحة (SPA) ، يمكن لـ JavaScript من جانب المستخدم اعتراض التنقل بين الصفحات، جلب البيانات الجديدة بشكل ديناميكي ، وتحديث الصفحة الحالية دون إعادة تحميلها بالكامل. وعادة ما يؤدي هذا إلى تجربة مستخدم أسرع، خصوصًا لحالات الاستخدام التي تشبه "التطبيقات" الحقيقية، حيث يُتوقع من المستخدم أن يقوم بالعديد من التفاعلات على مدى فترة طويلة من الوقت.

في هذه التطبيقات أحادية الصفحة، يكون "التوجيه" على جانب المستخدم في المتصفح. يتولى موجه من جانب المستخدم إدارة عرض التطبيق المُصيّر باستخدام واجهات برمجة التطبيقات للمتصفح مثل واجهة History أو الحدث hashchange.

الموجه الرسمي ​

Vue ملائم بشكل جيد لبناء التطبيقات أحادية الصفحة. و التي يُوصى فيها باستخدام مكتبة الموجه الرسمية. لمزيد من التفاصيل ، اطلع على توثيق موجه Vue.

توجيه بسيط من الصفر ​

إذا كنت بحاجة فقط إلى توجيه بسيط جدًا ولا ترغب في تضمين مكتبة موجه متكاملة الوظائف ، يمكنك القيام بذلك باستخدام المكونات الديناميكية وتحديث حالة المكون الحالي عن طريق استماع إلى الأحداث من جانب المستخدم أو باستخدام واجهة History.

هنا مثال بسيط:

<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="#/">الرئيسية</a> |
  <a href="#/about">حول</a> |
  <a href="#/non-existent-path">رابط غير موجود</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="#/">الرئيسية</a> |
  <a href="#/about">حول</a> |
  <a href="#/non-existent-path">رابط غير موجود</a>
  <component :is="currentView" />
</template>