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中文网其他相关文章！