vue router 配合 typescript 实现严格类型路由的核心是让路由名称、参数、元信息等全程参与类型推导与编译检查，主流方案是用 unplugin-vue-router 自动生成 typed-router.d.ts，支持字面量路由名、强约束 params/query 类型、类型安全跳转与守卫，并需手动扩展 routemeta 和规范动态路由写法。
Vue Router 配合 TypeScript 实现严格类型路由，核心在于让路由名称、参数结构、元信息、导航守卫等全部参与类型推导与编译检查，而不是依赖运行时猜测或手动维护字符串。关键不在于“能不能写类型”，而在于“类型能否自动跟随路由变更”。
用 unplugin-vue-router 自动生成路由类型
这是目前最主流、最稳定的实践方案。它基于文件系统约定（如 src/pages/user/[id]/index.vue），在构建时自动生成 typed-router.d.ts，包含：
-
精确的命名路由类型：每个
name都是字面量类型（如"user-detail"），拼错直接报错 -
参数结构强约束：
/user/:id(\d+)/:tab?会生成{ id: string; tab?: string }接口 -
query 类型可选定义：支持为特定路由声明
query的合法字段和类型（如{ page?: number; keyword?: string }）
路由跳转时的类型安全写法
不再用 router.push({ name: "xxx", params: { ... } }) 这种松散方式，而是借助生成的类型做推导：
- 调用
router.resolve({ name: "user-detail", params: { id: "123" } })时，params字段会被自动限制为该路由要求的键和类型 - 使用
useRoute().params获取时，返回值类型就是对应路由定义的Params接口，无需断言或as - 嵌套路由参数也自动分层，子路由的
params不会污染父级作用域
手动补全关键类型边界（按需）
对于动态注册的路由、权限控制路由或非约定式加载的页面，可补充少量类型定义：
- 扩展
RouteMeta接口，添加项目专属字段（如requiresAuth?: boolean、permission?: string） - 为
beforeEach守卫编写带类型签名的函数，例如：router.beforeEach((to, from, next) => { if (to.meta.requiresAuth && !isLogin()) next("/login") else next() })
其中to.meta已含你扩展的属性，IDE 可识别、TS 可校验 - 对
router.addRoute()动态添加的路由，传入对象需符合RouteRecordRaw类型，并显式标注name字面量
避免常见类型陷阱
有些写法看似有类型，实则绕过检查：
- 不用
router.push("/user/123")字符串路径 —— 它完全脱离类型系统 - 不把
params和query混用：前者用于资源标识（必填倾向），后者用于状态过滤（可选倾向），类型设计要区分对待 - 不忽略可选参数的
undefined处理：即使tab?是可选，route.params.tab类型仍是string | undefined，需主动判断
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
