Vue uto Routing nach Dateistruktur

Eines meiner Probleme bei der Arbeit mit VueJS ist das Erstellen von Routen, insbesondere wenn das Projekt größer wird und es zu einem Problem wird, Ihre route.ts oder route.js zu verwalten. Ich erinnere mich noch an ein Projekt, das zu viele Seiten hat, sodass Sie Ihre Routen aktualisieren müssen, wenn Sie eine neue Seite erstellen, und Sie müssen Ihre Routendatei jedes Mal aktualisieren, wenn Sie eine Seite entfernen, nur um zu vermeiden, dass Fehler angezeigt werden.

Also begann ich nach einer Möglichkeit zu suchen, das automatische Routing dateibasiert zu gestalten. Der Versuch, in Google zu suchen, war schwer zu finden, da die meisten Ergebnisse, die ich im Internet gefunden habe, sich hauptsächlich auf Webpack und Version 2 beziehen. Also musste ich es in der Vue Github-Repo-Diskussion fragen und bekam eine Antwort.

Wir stellen vor: Unplugin Vue Router. Dies ist ein typisiertes, dateibasiertes Routing für Vue 3. Und es ist tatsächlich einfach einzurichten. Dies ist experimentell, wie sie in ihrer Github-Readme-Datei angegeben haben.

Erstellen wir zunächst unser Vue-Projekt von Grund auf. Wie wir alle wissen, können wir durch Ausführen dieses Befehls ein Projekt erstellen und dann einige Optionen beantworten. Wenn Sie nicht wissen, wie es geht, können Sie sich den Schnellstart auf der VueJs-Seite ansehen.

pnpm create vue@latest

In diesem Beispiel habe ich das Projekt so erstellt.

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

Wir werden uns für Select TypeScript entscheiden. Ich habe den Router auch aktiviert, damit er automatisch Seiten für mich neu generiert.

Lassen Sie uns zu unserem Projekt wechseln und die Abhängigkeiten installieren. Abhängig von Ihrem verwendeten Paketmanager können Sie ihn also verwenden. Für mich selbst verwende ich das PNPM, das mir langsam gefällt. Sobald unser Projekt erstellt ist, müssen wir nun „unplugin-vue-router“ installieren.

pnpm add -D unplugin-vue-router

Jetzt aktualisieren wir vite.config.ts. Stellen Sie sicher, dass Sie das Plugin in Index 0 einfügen.

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)),
        },
    },

});

Als nächstes aktualisieren wir env.d.ts, damit unser Editor die Typen für unser Paket leicht finden kann.

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

Dann aktualisieren wir unsere Router index.ts in 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;

Da nun alles erledigt ist, können wir nun das Verzeichnis src/pages erstellen. In diesem Ordner oder Verzeichnis fügen wir unsere Seiten hinzu und es werden automatisch Routen basierend auf der Dateistruktur erstellt. Wenn Sie mit Nuxt vertraut sind, ist es in etwa so.

Lass uns eine About-Seite in srcpagesabout.vue erstellen.

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

Lass uns unsere Homepage erstellen, indem wir den Index in srcpagesindex.vue verwenden.

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

Dann können wir unsere Vue-App ausführen, indem wir ein Entwicklungsskript ausführen. pnpm-Entwickler. Wenn Sie auf „Startseite“ klicken, werden Sie zur Startseite weitergeleitet. Wenn Sie auf „Über“ klicken, werden Sie zur „Info“-Seite weitergeleitet.

Jetzt ist alles für Sie vorbereitet. Wenn Sie mit der Ordnerstruktur des Routers nicht vertraut sind. Sie können dieses Dokument unter https://uvr.esm.is/guide/file-based-routing.html überprüfen.

Versuchen wir, eine Slug-Komponente wie src/pages/blog/[id].vue mit diesem Inhalt hinzuzufügen.

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

Jetzt versuchen wir erneut, pnpm dev auszuführen. Und wenn Sie zu http://localhost:5173/blog/6 gehen, sollten Sie Folgendes erhalten.

Erstaunlich, oder? Ich hoffe, dieser kurze Blog hat Ihnen auf Ihrer VueJS-Reise geholfen. Ich wünsche Ihnen einen schönen Tag.

Wenn Ihnen dieser Artikel gefällt und Sie Ihre Unterstützung zeigen möchten, können Sie dies ganz einfach tun, indem Sie mir einen Kaffee spendieren. Ihr Beitrag wird sehr geschätzt!

---

Wenn Ihnen dieser Artikel gefällt und Sie Ihre Unterstützung zeigen möchten, können Sie dies ganz einfach tun, indem Sie mir einen Kaffee spendieren. Ihr Beitrag wird sehr geschätzt!

Das obige ist der detaillierte Inhalt vonVue uto Routing nach Dateistruktur. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!