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.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