Vue 神器，支持自动生成路由，从此告别繁琐的手动路由配置！

大家好，我是前端宝哥。

还在为手动配置 Vue.js 路由而烦恼吗？ 随着项目越来越大，管理路由变得越来越复杂，一不小心就会出错。别担心，现在有了 unplugin-vue-router 这个神器，可以帮你自动生成路由，轻松搞定路由配置！

unplugin-vue-router 是什么？

unplugin-vue-router 是一个 Vue.js 构建时插件，它可以利用 TypeScript 自动生成路由，并且保证代码的类型安全。它就像一个路由小助手，帮你省心省力！

这个插件的作者 Eduardo San Martin 也是 Vue 官方状态管理解决方案 Pinia 和 Vue 官方路由引擎 Vue Router 的开发者。他创建这个工具是因为在使用 TypeScript 直接在 Vue Router 中定义路由时遇到了不少麻烦。于是，他决定开发一个构建时工具，让路由的配置更加方便。

unplugin-vue-router 可以自动识别 src/pages 目录下的文件结构，并生成对应的路由，彻底告别手动配置路由的烦恼！

为什么使用自动基于文件的路由？

使用 unplugin-vue-router 有很多好处：

• 减少代码量：  再也不用手动写路由配置了，省时省力！

• 提高代码可维护性：  路由和组件保持同步，项目结构更清晰，维护起来更方便。

• 更好的组织性：  按照约定，页面组件都放在 src/pages 目录中，与 unplugin-vue-router 完美配合，让你的代码更易于管理。

• TypeScript 类型安全：  有了 TypeScript 支持，你的路由配置更加安全可靠，还能获得代码提示和自动补全。

• 延迟加载提升性能：  unplugin-vue-router 默认使用延迟加载路由，只加载当前页面所需的组件，提高初始页面加载速度，提升整体性能。

另外，你还可以在 Nuxt 3 应用中使用 unplugin-vue-router，只需要启用一个叫做 typedPages 的实验性功能。

如何开始使用 unplugin-vue-router？

现在，让我们来学习如何将 unplugin-vue-router 应用到一个基于 Vite 的 Vue.js 3 项目中，并且支持 TypeScript。

安装和配置

第一步，使用 npm 或你喜欢的包管理器安装 unplugin-vue-router：

npm i -D unplugin-vue-router

安装完成后，打开 vite.config.ts 文件，导入 unplugin-vue-router/vite 中的 Vue Router 插件，并将其放在 Vue 插件之前：

// vite.config.ts
import VueRouter from 'unplugin-vue-router/vite'

export default defineConfig({
  plugins: [
    VueRouter({}),
    Vue(),
  ],
})

接下来，生成类型文件，并将它添加到 tsconfig.json 中：

{
  "include": [
    // ...
    "./typed-router.d.ts"
  ],
  "compilerOptions": {
    // ...
    "types": ["unplugin-vue-router/client"]
  }
}

最后，打开创建 Vue Router 实例的文件，将 vue-router 的导入改为 vue-router/auto，并从 vue-router/auto-routes 导入 routes，自动将生成的路由传递给 Vue Router。

import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router/auto'
import { routes } from 'vue-router/auto-routes'
import App from './App.vue'

const router = createRouter({
  history: createWebHistory(),
  routes
})

createApp(App)
  .use(router)
  .mount('#app')

好了！ 现在你就可以告别手动配置路由的繁琐任务啦！

基于文件的路由与 Vue Router

现在，你可以创建一个 src/pages 目录，把所有 Vue 组件放在里面，它们会自动变成路由和页面。当然，为了使用起来更顺畅，你需要了解一些基于文件的路由命名约定和概念：

1. 约定优于配置：  unplugin-vue-router 会自动扫描 src/pages 目录，根据文件名创建路由，你不用再写复杂的路由配置文件。

2. 文件名决定路由路径：  例如：

• src/pages/index.vue 对应 / （应用首页）

• src/pages/about.vue 对应 /about （关于页面）

目录结构决定嵌套路由：  在 src/pages 目录下创建子目录，可以创建嵌套路由。 例如，在 users 目录下创建 index.vue 和 [id].vue，它们会对应以下路由：

• /users 对应 src/pages/users/index.vue （用户列表）

• /users/:id 对应 src/pages/users/[id].vue （单个用户详情页面，:id 是路由参数）

通用路由处理 (404)：  使用 src/pages/[...path].vue 创建通用路由，用于处理所有无法匹配的 URL，通常会显示一个自定义的“404 页面”。

重要注意事项：

虽然 unplugin-vue-router 看起来很强大，但它仍在开发中，可能会存在一些问题或限制。

• 它需要 Vue Router 版本 ^4.1.0 或更高。

• 安装插件后，你需要先运行开发服务器并更新 tsconfig.json 文件，添加 vue-router/auto 来确保类型安全。

• 虽然插件简化了开发，但为了搜索引擎优化，建议使用清晰描述性的路由路径。

总结

使用 unplugin-vue-router 可以轻松实现 Vue Router 的自动基于文件路由，简化开发流程，提升代码可维护性。同时，它还支持 TypeScript，确保类型安全。如果你想要让你的 Vue.js 项目更易于管理，更快速地开发，那么 unplugin-vue-router 绝对值得尝试！

---

最后，如果你觉得宝哥的分享还算实在，就给我点个赞，关注一波。分享出去，也许你的转发能给别人带来一点启发。

关注我，明天见！