使用unplugin-vue-router时TypeScript路由参数类型报错如何解决？

核心原因 #

unplugin-vue-router自动生成的路由参数是所有路由参数的联合类型，TypeScript无法确定当前页面对应的具体参数结构，因此会提示属性不存在。

实用解决方案 #

1. 显式断言当前页面参数类型 #

直接在组件内定义当前页面的参数类型，通过类型断言明确route.params的结构：

import type { RouteParams } from 'vue-router'

// 定义当前页面专属的参数类型
type CurrentPageParams = {
  slug: string
}

// 对params做类型断言
const slug = (route.params as CurrentPageParams).slug

2. 利用插件自动生成的路由名称泛型（推荐） #

unplugin-vue-router会根据文件路径自动生成路由名称（比如src/pages/[slug].vue对应的路由名称为'[slug]'），使用useRoute时指定该泛型，TypeScript就能自动识别对应参数：

import { useRoute } from 'vue-router'

// 传入自动生成的路由名称作为泛型
const route = useRoute<'[slug]'>()
// 此时route.params.slug会被正确识别，无类型报错
const slug = route.params.slug

注意：需确保tsconfig.json已包含插件自动生成的类型文件（通常是typed-router.d.ts），示例配置：

{
  "include": [
    "src/**/*",
    "typed-router.d.ts"
  ]
}

3. 全局类型扩展（兜底方案） #

若上述方法不适用，可通过全局类型扩展临时兼容，但此方法不够严谨（所有路由都会识别该参数）：

// 在src/types/router.d.ts中新增类型扩展
declare module 'vue-router' {
  interface RouteParams {
    slug?: string
  }
}

内容的提问来源于stack exchange，提问作者AJ.