
在 Vue 3 项目里,vue-router
基本是标配。
但是你有没有遇到过这些情况:
router.push({ name: "user", params: { id: 123 } })
------ 这里的name
,id
没有自动补全和类型提示,传错了只有运行时才报错。- 多人协作时,路由名写错了、参数漏了,调试半天才发现是个小问题。
- 项目一大,路由表复杂,导航和定义对不上,维护起来费劲。
是不是很熟悉?🙃
要是路由也能享受 TypeScript 的强类型保护 ,那就完美了。今天给大家分享一个我写的 Vite 插件 ------ vite-plugin-vue-typed-router
,它可以让 Vue Router 直接变"强类型",从此不怕写错路由。
vite-plugin-vue-typed-router 能做什么?
一句话总结:
👉 读取你的路由表,生成 typed-router.d.ts
,让 router.push
、useRoute
这些 API 全部有类型提示。
比如:
php
// 正确:id 必填,类型 number|string
router.push({ name: "user", params: { id: 123 } });
// 错误:缺少 id,直接 TS 报错
// router.push({ name: "user", params: {} });
// 错误:slug 类型不对
// router.push({ name: "docs", params: { slug: 1 } });
IDE 会直接帮你提示参数类型,团队协作时再也不用担心"写错路由名"这种低级错误了。
和 unplugin-vue-router 不同,这个插件 不依赖文件路由,纯手写路由表也能用,更灵活。
快速上手
1. 安装
csharp
pnpm add -D vite-plugin-vue-typed-router
# 或
npm i -D vite-plugin-vue-typed-router
2. 配置 vite.config.ts
javascript
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import typedRouter from "vite-plugin-vue-typed-router";
export default defineConfig({
plugins: [
vue(),
typedRouter({
dir: "src/types", // 类型文件输出目录(可选)
}),
],
});
3. 在开发环境发送路由表
javascript
// main.ts
import { createRouter, createWebHistory } from "vue-router";
export const routes = [
{ name: "home", path: "/" },
{ name: "user", path: "/users/:id" },
{ name: "docs", path: "/docs/:slug+" },
];
const router = createRouter({
history: createWebHistory(),
routes,
});
// 仅开发环境触发
if (import.meta.hot) {
import.meta.hot.send("typed-router:routes", router.getRoutes());
}
export default router;
4. tsconfig.json 里加上生成文件
json
{
"compilerOptions": { "strict": true },
"include": ["src", "src/types/typed-router.d.ts"]
}
重启一下 dev server,就能看到类型文件被生成,IDE 提示直接拉满 ✅。
为什么值得用?
- 不用改写路由表:照常写路由,插件自动生成类型。
- 提前发现问题:编译时就能报错,避免线上出 bug。
- 团队协作友好:新成员写路由时,IDE 自动提示路由名和参数。
- 灵活度高:相比文件路由插件,手写路由表场景也能用。
简单来说,这就是把 Vue Router 的"弱类型"痛点,彻底解决掉了。
适合哪些人?
- 使用 Vue 3 + Vue Router 4 的开发者
- 项目路由比较复杂,希望 减少低级错误 的团队
- 不想被约束死(比如必须用文件路由)的项目
最后
我自己在项目里用了之后,感觉最大的收益就是 写路由更安心,参数错误、拼写错误这些小坑全都被 TS 拦住了,开发体验比以前舒服太多。
有兴趣的朋友可以试试 👉 vite-plugin-vue-typed-router
如果觉得有用,欢迎 点个 Star⭐,支持一下。
PS:本文由AI生成(懒,而且比我写的好),任何问题欢迎提issue / mr