VueJS के साथ काम करते समय मेरी एक समस्या रूट बनाते समय होती है, खासकर यदि प्रोजेक्ट बड़ा हो रहा है और यह आपके रूट.टीएस या रूट.जेएस को बनाए रखने में समस्या बन जाता है। मुझे अभी भी एक प्रोजेक्ट याद है कि इसमें इतने सारे पेज हैं कि जब आप एक नया पेज बनाते हैं तो आपको अपने रूट को अपडेट करना पड़ता है और जब भी आप कोई पेज हटाते हैं तो आपको दिखाई देने वाली त्रुटियों से बचने के लिए अपनी रूट फ़ाइल को अपडेट करना पड़ता है।

इसलिए मैंने यह देखना शुरू किया कि फ़ाइल आधारित का उपयोग करके ऑटो रूटिंग कैसे बनाई जाए। Google में खोजने का प्रयास करना कठिन था क्योंकि इंटरनेट पर मुझे जो परिणाम मिले उनमें से अधिकांश वेबपैक और संस्करण 2 के लिए हैं। इसलिए मुझे इसे Vue Github रेपो चर्चा में पूछना पड़ा और मुझे एक उत्तर मिला।

अनप्लगिन Vue राउटर का परिचय यह Vue 3 के लिए एक टाइप किया हुआ, फ़ाइल-आधारित रूटिंग है। और इसे सेट करना वास्तव में आसान है। यह प्रायोगिक है जैसा कि उन्होंने अपनी जीथब रीडमी फ़ाइल में बताया है।

आइए सबसे पहले स्क्रैच से अपना 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

हम सेलेक्ट टाइपस्क्रिप्ट के साथ जाने वाले हैं। मैंने राउटर को भी सक्षम किया ताकि यह मेरे लिए पृष्ठों को स्वतः पुन: उत्पन्न कर सके।

आइए हमारे प्रोजेक्ट की सीडी बनाएं, और निर्भरताएं स्थापित करें। इसलिए आपके द्वारा उपयोग किए गए पैकेज मैनेजर के आधार पर आप इसका उपयोग कर सकते हैं। मेरे लिए मैं पीएनपीएम का उपयोग कर रहा हूं और मुझे यह पसंद आने लगा है। अब एक बार हमारा प्रोजेक्ट बन जाने के बाद, हमें अनप्लगइन-व्यू-राउटर इंस्टॉल करना होगा।

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 को अपडेट करें ताकि हमारा संपादक आसानी से हमारे पैकेज के प्रकार ढूंढ सके।

/// 
/// 

तो आइए हम अपने राउटर इंडेक्स.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 में इंडेक्स का उपयोग करके अपना होम पेज बनाएं।

फिर हम डेव स्क्रिप्ट चलाकर अपना वीयू ऐप चला सकते हैं। पीएनपीएम देव. आप उनके पास जाएं, यदि आप होम पर क्लिक करते हैं, तो आपको होम पेज पर रीडायरेक्ट किया जाएगा, यदि आप इसके बारे में क्लिक करते हैं तो आपको अबाउट पेज पर रीडायरेक्ट किया जाएगा।

अब, आपके लिए सब कुछ व्यवस्थित है। यदि आप राउटर फ़ोल्डर संरचना से परिचित नहीं हैं। आप इस दस्तावेज़ को https://uvr.esm.is/guide/file-आधारित-routing.html पर देख सकते हैं।

आइए इस सामग्री के साथ src/pages/blog/[id].vue जैसा स्लग घटक जोड़ने का प्रयास करें।

अब pnpm dev को फिर से चलाने का प्रयास करें। और जब आप http://localhost:5173/blog/6 पर जाएंगे तो आपको यह मिलना चाहिए।

आश्चर्यजनक है ना? मुझे आशा है कि इस लघु ब्लॉग ने आपकी VueJS यात्रा में आपकी सहायता की है। आपका दिन शुभ हो।

यदि आप इस लेख का आनंद लेते हैं और अपना समर्थन दिखाना चाहते हैं, तो आप मेरे लिए एक कॉफी खरीदकर आसानी से ऐसा कर सकते हैं। आपके योगदान का बहुत आभार होगा!

यदि आप इस लेख का आनंद लेते हैं और अपना समर्थन दिखाना चाहते हैं, तो आप मेरे लिए एक कॉफी खरीदकर आसानी से ऐसा कर सकते हैं। आपके योगदान का बहुत आभार होगा!