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 を更新しましょう。

/// 
/// 

次に、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 に詳しい方なら、それと似たような感じだと思います。

src\pages\about.vue に about ページを作成しましょう。

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

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

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

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

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

すごいですよね？この短いブログがあなたの VueJS の旅に役立つことを願っています。良い一日を。

この記事を気に入っていただき、サポートを示したい場合は、私にコーヒーを買うことで簡単にサポートを示すことができます。あなたの貢献に感謝します!

この記事を気に入っていただき、サポートを示したい場合は、私にコーヒーを買うことで簡単にサポートを示すことができます。あなたの貢献に感謝します!