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

相关推荐
鹏多多11 小时前
开发个人微信小程序类目选择/盈利方式/成本控制与服务器接入指南
前端·javascript·程序员
朦胧之11 小时前
前端项目设计
前端·vue.js·react.js
掘金安东尼11 小时前
前端周刊第429期(2025年8月25日–8月31日)
前端·javascript·面试
葫三生11 小时前
三生原理的“阴阳元”能否构造新的代数结构?
前端·人工智能·算法·机器学习·数学建模
Moment11 小时前
该用 <img> 还是 new Image()?前端图片加载的决策指南 😌😌😌
前端·javascript·面试
小楓120111 小时前
MySQL數據庫開發教學(四) 後端與數據庫的交互
前端·数据库·后端·mysql
Mike_jia11 小时前
SSM平台:Ansible与Docker融合的运维革命——轻量级服务器智能管理指南
前端
yinuo11 小时前
Uni-App跨端开发实战:编译微信小程序跳转全平台终极指南(01)
前端
小流苏生11 小时前
或许,找对象真的太难了……
前端·后端·程序员