كيفية إنشاء شريط التنقل في Vue.js

ماذا تتوقع

برنامج تعليمي حول كيفية إنشاء مكون شريط التنقل باستخدام Vue Router. سيكون لشريط التنقل أربعة مسارات:

  1. مرحبا بالعالم
  2. الصفحة الرئيسية
  3. حول
  4. اتصل

هذه الطرق سوف تملأ شريط التنقل باستخدام البيانات داخل المكون.

التكنولوجيا المستخدمة

لقد استخدمت ثلاث قطع رئيسية لإنشاء شريط التنقل هذا.

  • Vue.js لإنشاء قالب لكيفية عمل شريط التنقل.
  • Vue-cli لإنشاء مشروع vue.
  • Vue Router للتنقل بين الصفحات

إذا كنت تريد رؤية المشروع النهائي ، فإليك GitHub Repo.

1. بدء المشروع

قم بتثبيت Vue-CLI إذا لم تقم بذلك ، يمكنك النقر هنا للانتقال إلى صفحة تعليمات التثبيت. أحب استخدام NPM ، لذلك اتبعت تعليمات NPM. قم بإنشاء مجلد فارغ للعمل فيه وافتحه في الجهاز. أستخدم كود VS ، لذلك أفتحه وأعمل من الجهاز المدمج في حوالي 99 ٪ من الوقت. فيما يلي الأوامر لبدء المشروع. بعد كل أمر ، اضغط على enter

لقد أنشأنا مشروع Vue باستخدام الواجهة الأمامية للعنوان وقمنا بتثبيت جهاز التوجيه vue. يجب أن تبدو بنية مجلدك أدناه:

نحن بحاجة فقط للقلق بشأن ما هو موجود في مجلد src لهذا البرنامج التعليمي.

الآن بعد أن تم إعداد بيئتنا ، فلنبدأ تشغيلها حتى نعرف ما إذا كانت هناك أية أخطاء عند إنشاء المكونات. في الجهاز ، اكتب الأوامر التالية:

2. قم بإنشاء الصفحات الثلاث للانتقال إليها

لنقم بإنشاء الصفحات الثلاث الأخرى للتنقل بينها. الصفحة الأولى التي سننشئها هي الصفحة الرئيسية. دعنا نضيف ملف .vue جديد إلى مجلد المكونات المسمى Home.vue. أدناه هو ما سيحتوي مكون ملف واحد.

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

الآن وبعد الانتهاء من المكون الرئيسي ، دعونا نضيف المكون "حول". قم بإنشاء ملف جديد About.vue في مجلد المكونات وإضافة الرمز أدناه.

دعنا نضيف العنصر الأخير ، الاتصال. قم بإنشاء ملف جديد Contact.vue في مجلد المكونات وإضافة الرمز أدناه.

تم إضافة جميع المكونات الثلاثة. هنا هو الرابط لارتكاب هذه المكونات الثلاثة على جيثب.

3. تحديث جهاز التوجيه / index.js

الآن وقد أصبح لدينا جميع المكونات الضرورية ، فلنضيف طرقًا إلى المكونات الثلاثة الجديدة.

افتح جهاز التوجيه / index.js. هذا هو المكان الذي يتم فيه الإعلان عن جميع الطرق. نظرًا لأنه تم الإعداد باستخدام قالب حزمة الويب ، يحتوي index.js على مسار لمكون HelloWorld.

أولاً ، قم باستيراد المكون الرئيسي. للقيام بذلك ، قم بإضافة "استيراد الصفحة الرئيسية" من '@ / components / Home إلى سطر جديد أسفل الواردات الخاصة بك.

يجب أن يبدو الملف الآن كما يلي:

الخطوة التالية هي إضافة المسار الرئيسي لتتمكن من الانتقال إليه. للقيام بذلك ، قم بإضافة كائن إلى الصفيف الذي يتم تصديره. هنا هو كائن لإضافته:

{
  المسار: '/ المنزل' ،
  الاسم: "المنزل" ،
  المكون: الصفحة الرئيسية
}

إليك الشكل الذي يجب أن يبدو عليه index.js بعد إضافة مسار إلى المكون الرئيسي:

لاختبار نجاح هذا المسار ، انتقل إلى http: // localhost: 8080 / # / home الآن ، دعونا نستورد المكونين الآخرين ونضيف مساراتهما. يجب أن يبدو الملف الخاص بك هكذا عند الانتهاء:

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

4. إنشاء عنصر التنقل وعرضه

سنقوم بإنشاء مكون آخر ، مكون التنقل الفعلي. سوف يعرض هذا المكون روابط التنقل. قم بإنشاء ملف Nav.vue في مجلد المكونات. لنقم بإضافة مكان واحد للتنقل إلى الآن. لن يعتمد هذا على البيانات وسيتم تقديمه في القالب. في قسم القالب من ملف vue ، أضف ما يلي:

  

شريط التنقل   <الملاحة>      الصفحة الرئيسية   

خاص بـ Vue Router. عند استخدام Vue-Router ، لن تحتاج إلى استخدام للربط بصفحة أخرى. إلى = "" هو المسار الذي ستربط به.

يجب أن يبدو ملف Navigation.vue كما يلي:

الآن بعد الانتهاء من ارتباط التنقل وفي مكانه ، دعونا نضيف هذا المكون إلى جميع الصفحات. للقيام بذلك ، نحتاج إلى استيراد المكون إلى App.vue وعرضه.

للقيام بذلك ، قم بإضافة "استيراد التنقل" من "./components/Navigation" إلى قسم البرنامج النصي. في تصدير البرنامج النصي ، أضف كائن المكونات هذا بعد الاسم:

المكونات: {
  "الملاحة": الملاحة
}

الآن تم استيراد المكون وجاهز للاستخدام في App.vue. في قسم القالب ، أضف داخل العلامات

. يجب أن يبدو ملف App.vue كالتالي:

احفظ هذا الملف وسترى الآن رابط التنقل في متصفحك. إذا كنت تريد التنقل أعلى الصفحة ، فضع في بداية App.vue.

هنا هو ارتباط الالتزام بما تم تغييره حتى الآن.

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

فتح Navigation.vue في كائن التصدير ، نحتاج إلى إضافة البيانات التي يحصل عليها المكون. أضف ما يلي بعد الاسم: "التنقل":

البيانات() {
  إرجاع {
    الروابط: [
      {
         المعرف: 0 ،
         النص: "مرحباً بالعالم" ،
         الصفحة: '/ HelloWorld'
      }
    ]
  }
}

يحتفظ صفيف الارتباطات بالكائنات التي تحدد المعرف والنص الذي سيتم عرضه والمسار الذي سيتم الانتقال إليه.

في قسم القالب ، سنقوم بضبط ليكون هذا:

 

ما يفعله هذا هو إنشاء رابط توجيه جديد لكل كائن في الروابط ، الصفيف الذي أنشأناه للتو. باستخدام v-for ، سيتم إنشاء رابط توجيه جديد أو حذفه عند تحديث الروابط.

يربط السمة بالصفحة المشار إليها.

احفظ الملف وشاهد في المستعرض أن التنقل الخاص بك يحتوي على Hello World كارتباط للنقر.

يجب أن تبدو Navigation.vue كالتالي:

الآن ، أضف بقية المسارات. بعد إضافة جميع المسارات الأربعة ، يجب أن يكون Navigation.vue كما يلي:

النص موجود بجوار بعضها البعض ، لذلك دعونا نضيف بعض التصميم إلى هذا القالب لإخراج الروابط. أضف class = "spacing" إلى أدناه ، أضف ما يلي:

<نمط>
  تباعد
    الهامش الأيمن: 10 بكسل ؛
  }

حفظ والآن يجب أن يكون هناك مسافة بين روابط التنقل.

يجب أن يبدو ملف Navigation.vue النهائي كما يلي:

فيما يلي رابط الالتزام الأخير للمشروع المنجز.

لقد قمت الآن بإنشاء شريط Vue Navigation باستخدام مكون مخصص.

شكرا لقرائتك!

نُشرت في الأصل على https://maeganjwilson.github.io/web/development/2017/12/11/create-nav-vue.html في 11 ديسمبر 2017.