在 Vue + TypeScript 项目中，为 vue-router 的 params 和 query 定义接口类型可提升类型安全性：1. 路由配置中通过泛型 props 函数标注参数；2. 组件内用 useRoute 获取强类型 route 对象；3. router.push 使用命名路由配合接口校验跳转参数；4. 可选动态段需在接口中显式声明为可选字段。

在 Vue + TypeScript 项目中，为 vue-router 的路由参数（params）和查询字符串（query）定义准确类型，能显著提升类型安全性和开发体验。关键在于结合路由配置、路由守卫和组件内 useRoute() 的返回值进行类型标注。

1. 为路由配置中的 props 和 children 显式声明参数类型

在 router/index.ts 中定义路由时，用接口描述每个路由的 params 和 query 结构，并通过 props: true 或函数式 props 让组件接收强类型参数：

interface UserRouteParams {
  id: string; // /user/:id → id 是必填字符串
}

interface ProductQuery {
  category?: string;
  page?: number;
  search?: string;
}

const routes: RouteRecordRaw[] = [
  {
    path: '/user/:id',
    name: 'UserDetail',
    component: () => import('@/views/UserDetail.vue'),
    props: (route) => ({
      id: route.params.id, // 类型推导为 string（因 UserRouteParams.id 是 string）
    }),
  },
  {
    path: '/products',
    name: 'ProductList',
    component: () => import('@/views/ProductList.vue'),
    props: (route) => ({
      category: route.query.category ?? undefined,
      page: Number(route.query.page) || 1,
      search: route.query.search ?? '',
    }),
  },
];

2. 在组件中用泛型调用 useRoute 获取类型安全的路由对象

Vue Router 4 提供了泛型支持，可直接为 useRoute<t>()</t> 指定参数与查询的类型：

// @/views/UserDetail.vue
import { defineComponent } from 'vue';
import { useRoute } from 'vue-router';

interface UserRouteParams {
  id: string;
}

interface UserRouteQuery {
  tab?: 'profile' | 'settings';
}

export default defineComponent({
  setup() {
    const route = useRoute<UserRouteParams & UserRouteQuery>();

    // ✅ route.params.id 类型为 string
    // ✅ route.query.tab 类型为 'profile' | 'settings' | undefined
    console.log(route.params.id, route.query.tab);

    return {};
  },
});

3. 为 router.push 跳转时的参数和查询提供类型检查

使用命名路由跳转时，传入的对象可被自动校验。建议配合接口或类型别名约束：

javascript-typescript-typescript-scaffold

你是 TypeScript 项目架构专家，专注于脚手架搭建生产就绪的 Node.js 和前端应用。生成包含现代工具链（pnpm、Vite、Next.js）、类型

下载

立即学习“前端免费学习笔记（深入）”；

import { useRouter } from 'vue-router';

interface UserLocation {
  name: 'UserDetail';
  params: { id: string };
  query?: { tab?: 'profile' | 'settings' };
}

// ✅ 编译期检查：id 必须存在，且为 string；tab 只能是允许值或 undefined
router.push({ name: 'UserDetail', params: { id: '123' }, query: { tab: 'profile' } });

// ❌ 报错：id 缺失或类型错误
// router.push({ name: 'UserDetail', params: {} });
// router.push({ name: 'UserDetail', params: { id: 123 } });

4. 处理动态段与可选参数时注意联合类型与可选性

当路由含可选参数（如 /post/:id?/:slug?），params 中对应字段会是 string | undefined。建议在接口中显式标注可选，避免非空断言：

interface PostRouteParams {
  id?: string;   // 可选
  slug?: string; // 可选
}

// 组件中
const route = useRoute<PostRouteParams>();
if (route.params.id) {
  // 安全访问
  fetchPost(route.params.id);
}

不复杂但容易忽略：类型定义要和实际路由路径、跳转方式保持一致；推荐把路由相关类型集中放在 @/types/router.ts 统一管理，便于复用和维护。