Vue Academy · درس

إعداد Vue Router

ثبّت Vue Router وعرّف مساراتك الأولى

الدرس 1 من 313 خطوة

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

ما هو Vue Router؟

إن Vue Router هي مكتبة التوجيه الرسمية لـ Vue.

تربط عناوين URL بالمكونات
تتيح التنقل داخل صفحة واحدة من دون إعادة تحميل الصفحة بالكامل
تدير السجل والروابط والمعاملات

تثبيت Vue Router

أضف Vue Router إلى مشروعك باستخدام npm.

# Install Vue Router 4 (for Vue 3)
npm install vue-router

# Or have it added during npm create vue@latest

إنشاء مكونات المسارات

يعرض كل مسار مكونًا. ابدأ بمكونات صفحات بسيطة.

<!-- Home.vue -->
<template>
  <h1>Home Page</h1>
</template>

<!-- About.vue -->
<template>
  <h1>About Page</h1>
</template>

تعريف مصفوفة المسارات

تربط مصفوفة routes بين المسارات والمكونات.

import Home from "./views/Home.vue"
import About from "./views/About.vue"

const routes = [
  { path: "/", component: Home },
  { path: "/about", component: About }
]

createRouter

تنشئ الدالة createRouter موجّهًا من المسارات ونمط السجل.

import { createRouter, createWebHistory } from "vue-router"

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

createWebHistory

تستخدم createWebHistory واجهة HTML5 History API لإنشاء عناوين URL واضحة مثل /about.

لا تحتوي عناوين URL على رمز التجزئة
تتطلب إعداد الخادم لكي تعمل الروابط العميقة
البديل هو createWebHashHistory (/#/about)

تسجيل الموجّه

ثبّت الموجّه في التطبيق باستخدام app.use.

import { createApp } from "vue"
import App from "./App.vue"
import router from "./router"

createApp(App)
  .use(router)
  .mount("#app")

router-view

المكون router-view هو الموضع الذي يُعرض فيه مكون المسار المطابق.

<!-- App.vue -->
<template>
  <nav>...</nav>
  <router-view></router-view>
</template>

<!-- The current page renders here -->

router-link

استخدم router-link بدلًا من عناصر الارتباط العادية للتنقل. فهو يتجنب إعادة تحميل الصفحة بالكامل.

<template>
  <nav>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
  </nav>
</template>

تنسيق الروابط النشطة

تضيف router-link تلقائيًا فئات CSS إلى الرابط النشط.

router-link-active للتطابقات الجزئية
router-link-exact-active للتطابقات التامة

نسّق هذه الفئات لإبراز الصفحة الحالية.

تجميع الأجزاء

التدفق الكامل:

تعريف مسارات تربط المسارات بالمكونات
إنشاء الموجّه باستخدام createRouter وcreateWebHistory
تسجيله باستخدام app.use(router)
وضع router-view والتنقل باستخدام router-link

تحقق سريع

اختبر مدى فهمك لإعداد Vue Router.

أجب عليها في الدرس التفاعلي

مراجعة: إعداد Vue Router

لقد أعددت التوجيه من جانب العميل:

ثبّته باستخدام npm install vue-router
عرّف مصفوفة routes
استخدم createRouter مع createWebHistory
سجّله عبر app.use(router)
استخدم router-view وrouter-link

التالي: المسارات المتداخلة والديناميكية.

البدء مجانًا

تعلم HTML مع معلم ذكاء اصطناعي — مجانًا

اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.

الدورات: 42
الدروس: 156

ابدأ التعلم مجانًا عرض الدورة الكاملة

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

هل درس «إعداد Vue Router» مجاني؟

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

ماذا ستتعلم في «إعداد Vue Router»؟

ثبّت Vue Router وعرّف مساراتك الأولى تتمرن على Vue Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

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

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

كم من الوقت يستغرق درس «إعداد Vue Router»؟

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

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

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

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

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