إحدى مشكلاتي عند العمل مع VueJS هي عند إنشاء مسارات خاصة إذا كان المشروع يكبر وتصبح مشكلة في محاولة الحفاظ على مسارك.ts أو مسار.js. ما زلت أتذكر مشروعًا يحتوي على عدد كبير جدًا من الصفحات التي يتعين عليك تحديث مساراتك عند إنشاء صفحة جديدة ويجب عليك تحديث ملف المسار الخاص بك عندما تقوم بإزالة صفحة فقط لتجنب ظهور الأخطاء.

لذلك بدأت في البحث عن كيفية إجراء التوجيه التلقائي باستخدام الملف. كان من الصعب العثور على محاولة البحث في Google لأن معظم النتائج التي وجدتها على الإنترنت كانت في الغالب تتعلق بحزمة الويب والإصدار 2. لذلك يجب أن أسألها في مناقشة Vue Github repo وحصلت على إجابة.

تقديم Unplugin Vue Router، وهو توجيه مكتوب ومستند إلى ملف لـ Vue 3. ومن السهل بالفعل إعداده. هذا تجريبي كما ذكروا في الملف التمهيدي الخاص بهم على Github.

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

pnpm create vue@latest

لذلك في هذا المثال هذه هي الطريقة التي أنشأت بها المشروع.

pnpm create vue@latest

Vue.js - The Progressive JavaScript Framework

√ Project name: ... vue-auto-route
√ Add TypeScript? ... No / Yes
√ Add JSX Support? ... No / Yes
√ Add Vue Router for Single Page Application development? ... No / Yes
√ Add Pinia for state management? ... No / Yes
√ Add Vitest for Unit Testing? ... No / Yes
√ Add an End-to-End Testing Solution? » No
√ Add ESLint for code quality? ... No / Yes
√ Add Vue DevTools 7 extension for debugging? (experimental) ... No / Yes

Scaffolding project in D:\Projects\Testing\vue-auto-route...

Done. Now run:

  cd vue-auto-route
  pnpm install
  pnpm dev

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

يتيح القرص المضغوط لمشروعنا، وتثبيت التبعيات. لذا، اعتمادًا على مدير الحزم الذي استخدمته، يمكنك استخدامه. بالنسبة لي أنا أستخدم pnpm وقد بدأت أحبه. الآن بعد إنشاء مشروعنا، كان علينا الآن تثبيت unplugin-vue-router.

pnpm add -D unplugin-vue-router

الآن، لنقم بتحديث vite.config.ts . تأكد من وضع المكون الإضافي في الفهرس 0.

import { fileURLToPath, URL } from "node:url";
import VueRouter from "unplugin-vue-router/vite";
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        VueRouter({
            /* options */
        }),
        // ⚠️ Vue must be placed after VueRouter()
        vue(),
    ],
    resolve: {
        alias: {
            "@": fileURLToPath(new URL("./src", import.meta.url)),
        },
    },

});

لنقم بعد ذلك بتحديث env.d.ts حتى يتمكن محررنا من العثور بسهولة على أنواع حزمتنا.

/// 
/// 

ثم دعونا نقوم بتحديث ملف Index.ts لجهاز التوجيه الخاص بنا في src/router/index.ts.

import { createRouter, createWebHistory } from "vue-router";
import { routes, handleHotUpdate } from "vue-router/auto-routes";

const router = createRouter({
    history: createWebHistory(import.meta.env.BASE_URL),
    routes,
});

if (import.meta.hot) {
    handleHotUpdate(router);
}

export default router;

الآن بعد أن تم كل شيء، يمكننا الآن إنشاء دليل src/pages، وفي هذا المجلد أو الدليل هو المكان الذي نضيف فيه صفحاتنا ويقوم تلقائيًا بإنشاء مسارات بناءً على بنية الملف. إذا كنت معتادًا على Nuxt، فهو شيء من هذا القبيل.

لننشئ صفحة حول في src\pages\about.vue.

لنقم بإنشاء صفحتنا الرئيسية باستخدام الفهرس الموجود في src\pages\index.vue.

ثم يمكننا بعد ذلك تشغيل تطبيق vue الخاص بنا، عن طريق تشغيل برنامج dev script. تطوير pnpm. بعد ذلك، إذا نقرت على الصفحة الرئيسية، ستتم إعادة توجيهك إلى الصفحة الرئيسية، وإذا نقرت حول ستتم إعادة توجيهك إلى صفحة حول.

الآن، تم إعداد كل شيء من أجلك. إذا لم تكن على دراية ببنية مجلد جهاز التوجيه. يمكنك التحقق من هذا المستند https://uvr.esm.is/guide/file-based-routing.html.

لنحاول إضافة مكون ثابت مثل src/pages/blog/[id].vue مع هذا المحتوى.

الآن لنحاول تشغيل pnpm dev مرة أخرى. وعندما تذهب إلى http://localhost:5173/blog/6 يجب أن تحصل على هذا.

مذهل أليس كذلك؟ أتمنى أن تكون هذه المدونة القصيرة قد ساعدتك في رحلتك مع VueJS. اتمنى لك يوم جيد.

إذا استمتعت بهذا المقال وترغب في إظهار دعمك، فيمكنك القيام بذلك بسهولة عن طريق شراء قهوة لي. مساهمتك محل تقدير كبير!

إذا استمتعت بهذا المقال وترغب في إظهار دعمك، فيمكنك القيام بذلك بسهولة عن طريق شراء قهوة لي. مساهمتك محل تقدير كبير!