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