Vue Router 也能“强类型”?vite-plugin-vue-typed-router 上手体验

在 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.pushuseRoute 这些 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

相关推荐
gihigo199822 分钟前
在CentOS上配置SVN至Web目录的自动同步
前端·svn·centos
珍宝商店27 分钟前
优雅的 async/await 错误处理模式指南
开发语言·前端·javascript
excel42 分钟前
楖览:Vue3 源码研究导读
前端
proud121244 分钟前
开源的 CSS 动画库
前端·css·开源
折翼的恶魔1 小时前
HTML媒体标签
前端·html
excel1 小时前
前端项目中的测试分类与实践 —— 以 Vue 项目为例
前端
宋辰月1 小时前
echarts项目积累
前端·javascript·echarts
du青松1 小时前
onlyoffice 服务搭建及配置 - 前端 office 文件预览解决方案
前端
北海-cherish1 小时前
Wouter 和 React Router的区别
前端·react.js·前端框架
郝学胜-神的一滴2 小时前
深入理解前端 Axios 框架:特性、使用场景与最佳实践
开发语言·前端·程序人生·软件工程