ファイル構造による Vue uto ルーティング

VueJS を使用するときに私が直面する問題の 1 つは、特にプロジェクトが大きくなり、route.ts または Route.js を維持するのが問題になる場合に、ルートを作成するときです。ページが多すぎるため、新しいページを作成するときにルートを更新する必要があり、エラーが表示されるのを避けるためにページを削除するたびにルート ファイルを更新する必要があるというプロジェクトを今でも覚えています。

そこで、ファイルベースを使用して自動ルーティングを作成する方法を探し始めました。インターネットで見つけた結果のほとんどが Webpack とバージョン 2 に関するものだったため、Google で検索しようとしても見つけるのが困難でした。そこで、Vue Github リポジトリのディスカッションで質問する必要があり、答えが得られました。

Unplugin Vue Router の紹介。これは、Vue 3 用の型指定されたファイルベースのルーティングです。実際、セットアップは簡単です。 Github の Readme ファイルに記載されているように、これは実験的なものです。

まず、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

ここでは「Select TypeScript」を使用します。また、ページを自動的に再生成するように Router を有効にしました。

プロジェクトに cd して、依存関係をインストールしましょう。したがって、使用したパッケージマネージャーに応じて、それを使用できます。私は 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 を更新しましょう。

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

次に、src/router/index.ts 内のルーターの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 に精通している方なら、それと似たような感じです。

srcpagesabout.vue に About ページを作成しましょう。

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

srcpagesindex.vue のインデックスを使用してホームページを作成しましょう。

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

その後、開発スクリプトを実行して、vue アプリを実行できます。 pnpm開発者。 [ホーム] をクリックするとホームページにリダイレクトされ、[概要] をクリックすると概要ページにリダイレクトされます。

これで、すべての設定が完了しました。ルーターのフォルダー構造に詳しくない場合は、次のようにしてください。このドキュメント https://uvr.esm.is/guide/file-based-routing.html を確認できます。

このコンテンツを含む src/pages/blog/[id].vue のような slug コンポーネントを追加してみましょう。

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

ここで、pnpm dev を再度実行してみます。 http://localhost:5173/blog/6 にアクセスすると、これが表示されるはずです。

すごいですね?この短いブログがあなたの VueJS の旅に役立つことを願っています。良い一日をお過ごしください。

この記事を気に入っていただき、サポートを示したい場合は、コーヒーをおごっていただければ簡単にサポートしていただけます。あなたの貢献に感謝します!

---

この記事を気に入っていただき、サポートを示したい場合は、コーヒーをおごっていただければ簡単にサポートしていただけます。あなたの貢献に感謝します!

以上がファイル構造による Vue uto ルーティングの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。