التوجيه
التوجيه من جانب الخادوم مقابل التوجيه من جانب المستخدم
Routing on the server side means the server is sending a response based on the URL path that the user is visiting. When we click on a link in a traditional server-rendered web app, the browser receives an HTML response from the server and reloads the entire page with the new HTML.
لكن في التطبيق أحادي الصفحة (SPA) ، يمكن لـ JavaScript من جانب المستخدم اعتراض التنقل بين الصفحات، جلب البيانات الجديدة بشكل ديناميكي ، وتحديث الصفحة الحالية دون إعادة تحميلها بالكامل. وعادة ما يؤدي هذا إلى تجربة مستخدم أسرع، خصوصًا لحالات الاستخدام التي تشبه "التطبيقات" الحقيقية، حيث يُتوقع من المستخدم أن يقوم بالعديد من التفاعلات على مدى فترة طويلة من الوقت.
في هذه التطبيقات أحادية الصفحة، يكون "التوجيه" على جانب المستخدم في المتصفح. يتولى موجه من جانب المستخدم إدارة عرض التطبيق المُصيّر باستخدام واجهات برمجة التطبيقات للمتصفح مثل واجهة History أو الحدث hashchange
.
الموجه الرسمي
Vue ملائم بشكل جيد لبناء التطبيقات أحادية الصفحة. و التي يُوصى فيها باستخدام مكتبة الموجه الرسمية. لمزيد من التفاصيل ، اطلع على توثيق موجه Vue.
توجيه بسيط من الصفر
إذا كنت بحاجة فقط إلى توجيه بسيط جدًا ولا ترغب في تضمين مكتبة موجه متكاملة الوظائف ، يمكنك القيام بذلك باستخدام المكونات الديناميكية وتحديث حالة المكون الحالي عن طريق استماع إلى الأحداث من جانب المستخدم أو باستخدام واجهة History.
هنا مثال بسيط:
vue
<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>