قم بإعداد نظام توجيه قوي لتطبيق Vue الخاص بك باستخدام Vue Router.

يتيح Vue Router ، الموجه الرسمي لـ Vue ، إنشاء تطبيقات ذات صفحة واحدة (SPAs) في Vue. يتيح لك Vue Router تعيين مكونات تطبيق الويب الخاص بك إلى مسارات متصفح مختلفة ، وإدارة مكدس محفوظات تطبيقك ، وإعداد خيارات توجيه متقدمة.

الشروع في العمل مع Vue Router

لبدء استخدام Vue Router ، قم بتشغيل ما يلي npm (مدير حزمة العقدة) الأمر في دليلك المفضل لإنشاء تطبيق Vue الخاص بك:

npm create vue

عندما يُطلب منك ما إذا كنت تريد إضافة Vue Router لـ تطبيق صفحة واحدة التنمية ، حدد نعم.

بعد ذلك ، افتح مشروعك في محرر النصوص المفضل لديك. تطبيقك src يجب أن يتضمن الدليل أ جهاز التوجيه مجلد.

ال جهاز التوجيه يحتوي المجلد على ملف index.js ملف يحتوي على كود JavaScript للتعامل مع المسارات في تطبيقك. ال index.js يستورد الملف وظيفتين من ملف جهاز التوجيه vue طَرد: إنشاء جهاز التوجيه و createWebHistory.

ال إنشاء جهاز التوجيه تقوم الوظيفة بإنشاء تكوين مسار جديد من كائن. هذا الكائن يحتوي على تاريخ و الطرق مفاتيح وقيمها. ال الطرق key عبارة عن مجموعة من الكائنات التي توضح بالتفصيل تكوين كل مسار ، كما هو موضح في الصورة أعلاه.

instagram viewer

بعد تكوين مساراتك ، تحتاج إلى تصدير هذا جهاز التوجيه مثيل واستيراد هذا المثال إلى ملف main.js ملف:

import'./assets/main.css'
import { createApp } from'vue'
import App from'./App.vue'
import router from'./router'


const app = createApp(App)


app.use(router)
app.mount('#app')

قمت باستيراد ملف جهاز التوجيه وظيفة في main.js ملف ثم جعل تطبيق Vue الخاص بك يستخدم وظيفة جهاز التوجيه هذه مع يستخدم طريقة.

يمكنك بعد ذلك تطبيق مساراتك على تطبيق Vue الخاص بك عن طريق هيكلة كتلة تعليمات برمجية مشابهة لتلك الموجودة أدناه: