Vue uto 透過檔案結構進行路由

使用 VueJS 時我遇到的一個問題是創建路由時，特別是當專案變得越來越大並且試圖維護你的 Route.ts 或 Route.js 時就會出現問題。我還記得一個項目，它有太多的頁面，當你創建一個新頁面時，你必須更新你的路由，當你刪除一個頁面時，你必須更新你的路由文件，以避免錯誤。

所以我開始尋找如何使用基於檔案的自動路由。嘗試在 google 中搜尋很難找到，因為我在網路上找到的大部分結果都是針對 webpack 和版本 2 的結果。所以我必須在 Vue Github 存儲庫討論中詢問它，我得到了答案。

Unplugin Vue Router 簡介，這是 Vue 3 的類型化、基於檔案的路由。而且實際上很容易設置它。正如他們在 Github 自述文件中所述，這是實驗性的。

首先讓我們從頭開始建立我們的 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 中建立關於頁面。

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

讓我們使用 srcpagesindex.vue 中的索引來建立我們的主頁。

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

然後我們可以透過執行 dev 腳本來執行我們的 vue 應用程式。 PNPM 開發公司 就這樣吧，如果您單擊“主頁”，您將被重定向到主頁，如果您單擊“關於”，您將被重定向到關於頁面。

現在，一切都為您準備好了。如果您不熟悉路由器資料夾結構。您可以查看此文件https://uvr.esm.is/guide/file-based-routing.html。

讓我們嘗試新增一個 slug 元件，例如 src/pages/blog/[id].vue 並包含此內容。

<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中文網其他相關文章！