فهم التوجيه في Vue.js

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

ما هو فيو راوتر؟

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

تثبيت جهاز التوجيه فيو

أولاً، نحتاج إلى تثبيت Vue Router. إذا كنت تستخدم Vue CLI، فيمكنك تحديد تثبيته أثناء إنشاء مشروع جديد. إذا لم يكن الأمر كذلك، فيمكنك تثبيته باستخدام الأمر التالي:

npm install vue-router

إعداد جهاز التوجيه Vue

بعد التثبيت، نحتاج إلى تكوين Vue Router. فيما يلي الخطوات الأساسية لإعداده:

• إنشاء ملف جهاز التوجيه قم بإنشاء ملف جديد باسم router.js داخل المجلد src: استيراد Vue من "vue"؛ استيراد جهاز التوجيه من 'vue-router'؛ استيراد الصفحة الرئيسية من "./views/Home.vue"؛ استيراد حول من "./views/About.vue"؛

Vue.use(Router);

export default new Router({
  mode: 'history', // Using history mode for cleaner URLs
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
    },
    {
      path: '/about',
      name: 'about',
      component: About,
    },
  ],
});

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

import Vue from 'vue';
import App from './App.vue';
import router from './router';

new Vue({
  el: '#app',
  router, // Add the router to the Vue instance
  render: h => h(App),
});

• استخدام روابط جهاز التوجيه للتنقل بين الصفحات، نستخدم مكون . فيما يلي مثال لكيفية استخدامه في ملف App.vue:

• إنشاء صفحات جديدة الآن، لنقم بإنشاء مكونين سنستخدمهما: Home.vue وAbout.vue.

Home.vue:

حول.vue:

الآن يمكنك تشغيل التطبيق الخاص بك باستخدام الأمر:

npm run serve

افتح متصفحك وانتقل إلى http://localhost:8080. حاول النقر على رابطي الصفحة الرئيسية وحول لمعرفة كيفية عمل التوجيه!

خاتمة

في هذا المنشور، قمنا بتغطية أساسيات التوجيه في Vue.js باستخدام Vue Router. ومن خلال إمكانية التوجيه هذه، يمكنك إنشاء تطبيقات أكثر تفاعلية وسهلة الاستخدام. في المقالة التالية، يمكننا التعمق في المزيد من الميزات المتقدمة لجهاز Vue Router، مثل معلمات المسار والمسارات المتداخلة.

أتمنى أن تكون هذه المشاركة مفيدة لك! لا تتردد في ترك تعليق إذا كان لديك أي أسئلة.