Routage Vue uto par structure de fichiers

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 repo Vue Github et j'ai obtenu une réponse.

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

Commençons par créer 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 sur la page VueJs.

pnpm create vue@latest

Donc, dans cet exemple, c'est ainsi que 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.

Cd sur notre projet et installons 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éé, il nous fallait 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.

/// <reference types="vite/client" />
/// <reference types="unplugin-vue-router/client" />

Alors 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 comme ça.

Créons une page à propos dans srcpagesabout.vue.

<template>
    <div>This is the about page</div>
</template>

Créons notre page d'accueil en utilisant l'index dans srcpagesindex.vue.

<template>
    <div>This is Home Page</div>
</template>

Ensuite, nous pouvons ensuite exécuter notre application vue, en exécutant un script dev. développeur pnpm. 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 cette doc https://uvr.esm.is/guide/file-based-routing.html.

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

<script setup>
const { id } = useRoute().params;
</script>
<template>
    <div>This is the blog post with id: {{ id }}</div>
</template>

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. 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 !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!