Vue Academy · درس

التنقل البرمجي وuseRouter

‏router.push() وrouter.replace() وrouter.go()، وComposables ‏useRouter() وuseRoute()

التنقل البرمجي وuseRouter درس مجاني في Vue Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Vue Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Vue Academy 4 دروس في المجموع.

التنقل من الشيفرة

إلى جانب RouterLink، تحتاجون غالبًا إلى التنقل من JavaScript — بعد إرسال نموذج أو تسجيل الدخول. يمنحكم التركيب useRouter مثيل جهاز التوجيه للقيام بذلك.

الحصول على جهاز التوجيه

استدعوا useRouter() داخل <script setup>. يعرض الكائن المُعاد push وreplace وgo وغير ذلك.

import { useRouter } from 'vue-router'
const router = useRouter()

التنقل باستخدام push

يضيف router.push إدخالًا إلى مكدس السجل — مثل النقر على رابط. ويأخذ أبسط شكل منه سلسلة مسار.

router.push('/dashboard')

استخدام push مع كائن مسار

يمكنكم أيضًا تمرير كائن يحتوي على name وparams وquery. تتجنب المسارات المسمّاة تثبيت المسارات في الشيفرة.

router.push({
  name: 'user',
  params: { id: 42 },
  query: { tab: 'profile' }
})

Replace: دون إدخال في السجل

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

router.replace('/dashboard')

الرجوع والتقدم

يتنقل router.go(n) عبر السجل بمقدار n من الخطوات. يعود router.go(-1) صفحة واحدة، بينما يتقدم router.go(1) صفحة واحدة.

function goBack() {
  router.go(-1)
}

بعد إجراء غير متزامن

التدفق المعتاد هو: إرسال نموذج، وانتظار النتيجة، ثم التنقل. يعيد push وعدًا يمكنكم انتظاره حتى اكتمال العملية.

async function login() {
  await auth.signIn(form)
  router.push('/dashboard')
}

قراءة المسار الحالي

لقراءة المعاملات والاستعلام في المسار الحالي، استخدموا التركيب useRoute. لا تخلطوا بينه وبين useRouter — إذ إن useRoute هو المسار، بينما useRouter هو أداة التنقل.

import { useRoute } from 'vue-router'
const route = useRoute()

الوصول إلى المعاملات

اقرؤوا المقاطع الديناميكية عبر route.params. بالنسبة إلى مسار /user/:id، يوجد المعرّف id في route.params.id.

const userId = route.params.id

الوصول إلى سلاسل الاستعلام

اقرؤوا سلسلة الاستعلام عبر route.query. بالنسبة إلى ?tab=profile، استخدموا route.query.tab.

const tab = route.query.tab

التفاعل مع تغيّر المعاملات

بما أن route تفاعلي، راقبوه باستخدام watch للاستجابة عند تغيّر المعاملات مع البقاء في المكوّن نفسه.

import { watch } from 'vue'
watch(() => route.params.id, (newId) => {
  loadUser(newId)
})

اختبار سريع

اختبروا معرفتكم بالتنقل البرمجي.

خلاصة

لقد تعلمتم التنقل البرمجي:

يمنحكم useRouter() الدوال push وreplace وgo.
يضيف push إدخالًا إلى السجل، بينما لا يفعل replace ذلك؛ ويعود go(-1) إلى الصفحة السابقة.
يقبل push سلسلة مسار أو كائنًا من الشكل { name, params, query }.
يقرأ useRoute() المعاملات والاستعلام الحاليين، وهو تفاعلي.

الأسئلة الشائعة

هل درس «التنقل البرمجي وuseRouter» مجاني؟

نعم — نص درس «التنقل البرمجي وuseRouter» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Vue Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Vue Academy 4 دروس في المجموع.

ماذا ستتعلم في «التنقل البرمجي وuseRouter»؟

‏router.push() وrouter.replace() وrouter.go()، وComposables ‏useRouter() وuseRoute() تتمرن على Vue Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Vue Academy؟

لا تُشترط خبرة سابقة. Vue Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.

كم من الوقت يستغرق درس «التنقل البرمجي وuseRouter»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Vue Academy هذا؟

نعم. كل درس في Vue Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى Vue Academy