在Vue-Router中使用TypeScript添加类型及router参数类型咨询

一、导出函数中router参数的类型 #

你代码里的router是Vue-Router的路由实例对象，对应的TypeScript类型是Router，需要从vue-router包中导入。修改后的代码如下：

import { RouteRecordRaw, Router } from 'vue-router'

const moduleRoute: Array<RouteRecordRaw> = [
    {
        path: '/user',
        component: () => import('./HomeModule.vue'),
        children: []
    }
]

export default (router: Router) => {
    router.addRoute(moduleRoute)
}

二、Vue-Router 结合 TypeScript 完整类型配置指南 #

1. 基础类型导入与路由数组定义 #

• 单个路由配置项的类型是RouteRecordRaw，用于约束路由规则的结构，你已经在代码中正确使用了这个类型。
• 如果需要自定义路由元信息（比如meta字段），可以扩展RouteMeta类型，实现自定义字段的类型提示：

  import type { RouteMeta } from 'vue-router'
  
  declare module 'vue-router' {
    interface RouteMeta {
      // 自定义元字段示例：是否需要登录校验
      requiresAuth?: boolean
      // 自定义元字段示例：页面标题
      title?: string
    }
  }
  

  之后在路由配置中，meta字段就能获得对应的类型校验：

  const moduleRoute: RouteRecordRaw[] = [
    {
      path: '/user',
      component: () => import('./HomeModule.vue'),
      meta: {
        requiresAuth: true,
        title: '用户中心'
      },
      children: []
    }
  ]
  

2. 路由实例的类型约束 #

创建路由实例时，TypeScript会自动根据路由数组推断类型，若需要显式指定，可直接使用Router类型：

import { createRouter, createWebHistory, Router } from 'vue-router'

const routes: RouteRecordRaw[] = [/* 你的路由配置 */]

const router: Router = createRouter({
  history: createWebHistory(),
  routes
})

3. 组件内路由API的类型支持 #

在Vue组件中使用useRoute()和useRouter()时，TypeScript会自动提供完整的类型提示与校验：

import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
// route.params、route.meta等属性会自动匹配你定义的类型

const router = useRouter()
// router.push、router.addRoute等方法会校验参数格式

内容的提问来源于stack exchange，提问作者Rhejie E Aranez