L'un de mes problèmes lorsque je travaille avec VueJS est lors de la création de routes, surtout si le projet prend de l'ampleur et que cela devient un problème d'essayer de maintenir votre route.ts ou route.js. Je me souviens encore d'un projet comportant trop de pages et vous devez mettre à jour vos itinéraires lorsque vous créez une nouvelle page et vous devez mettre à jour votre fichier d'itinéraire chaque fois que vous supprimez une page juste pour éviter que des erreurs n'apparaissent.

J'ai donc commencé à chercher comment effectuer le routage automatique en utilisant un fichier. Essayer de rechercher sur Google était difficile à trouver car la plupart des résultats que je trouve sur Internet concernent principalement le webpack et la version 2. J'ai donc dû le poser dans la discussion sur le dépôt Vue Github et j'ai obtenu une réponse.

Présentation d'Unplugin Vue Router, il s'agit d'un routage typé basé sur des fichiers pour Vue 3. Et il est en fait facile à configurer. Ceci est expérimental comme ils l'ont indiqué dans leur fichier readme Github.

Tout d'abord, créons notre projet Vue à partir de zéro. Comme nous le savons tous, nous pouvons générer un projet en exécutant cette commande, puis répondre à certaines options. Si vous ne savez pas comment procéder, vous pouvez consulter Démarrage rapide dans la page VueJs.

pnpm create vue@latest

Donc, dans cet exemple, voici comment j'ai créé le projet.

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

Nous allons utiliser Select TypeScript. J'ai également activé le routeur pour qu'il régénére automatiquement les pages pour moi.

Permet d'accéder à notre projet et d'installer les dépendances. Ainsi, en fonction du gestionnaire de packages que vous avez utilisé, vous pouvez l'utiliser. Pour ma part j'utilise le pnpm je commence à l'aimer. Maintenant, une fois notre projet créé, nous devions maintenant installer unplugin-vue-router.

pnpm add -D unplugin-vue-router

Maintenant, mettons à jour vite.config.ts . Assurez-vous de mettre le plugin dans l'index 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)),
        },
    },

});

Ensuite, mettons à jour env.d.ts afin que notre éditeur puisse facilement trouver les types de notre package.

/// 
/// 

Ensuite, mettons à jour notre routeur index.ts dans 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;

Maintenant que tout est fait, nous pouvons maintenant créer le répertoire src/pages, et dans ce dossier ou répertoire c'est là que nous ajoutons nos pages et il crée automatiquement des itinéraires en fonction de la structure des fichiers. Si vous connaissez Nuxt, c'est quelque chose qui y ressemble.

Créons une page à propos dans src\pages\about.vue.

Créons notre page d'accueil en utilisant l'index dans src\pages\index.vue.

Ensuite, nous pouvons ensuite exécuter notre application vue, en exécutant un script dev. développeur pnpm. Là, c'est parti, si vous cliquez sur Accueil, vous serez redirigé vers la page d'accueil, si vous cliquez sur à propos, vous serez redirigé vers la page à propos.

Maintenant, tout est configuré pour vous. Si vous n'êtes pas familier avec la structure des dossiers du routeur. Vous pouvez consulter ce document https://uvr.esm.is/guide/file-based-routing.html.

Essayons d'ajouter un composant slug comme src/pages/blog/[id].vue avec ce contenu.

Essayons maintenant d'exécuter à nouveau pnpm dev. Et lorsque vous allez sur http://localhost:5173/blog/6, vous devriez obtenir ceci.

Incroyable, n'est-ce pas ? J'espère que ce court blog vous a aidé dans votre parcours VueJS. Passe une bonne journée.

Si vous appréciez cet article et souhaitez montrer votre soutien, vous pouvez facilement le faire en m'offrant un café. Votre contribution est grandement appréciée!

Si vous appréciez cet article et souhaitez montrer votre soutien, vous pouvez facilement le faire en m'offrant un café. Votre contribution est grandement appréciée!