如何在TypeScript构建中获取Vue/Nuxt的route object类型？

要消除Nuxt路由中间件中to和from参数的TypeScript隐式any警告，你可以通过以下几种方式处理：

1. 直接使用vue-router内置类型 #

Nuxt 3基于vue-router v4，你可以从vue-router导入RouteLocationNormalized类型，直接为参数指定类型：

import type { RouteLocationNormalized } from 'vue-router'

export default defineNuxtRouteMiddleware((to: RouteLocationNormalized, from: RouteLocationNormalized) => {
  if (to.params.id === '1') {
    return abortNavigation()
  }
  if (to.path !== '/') {
    return navigateTo('/')
  }
})

2. 自定义路由参数类型（可选） #

如果你的路由有自定义的params或query参数，可以扩展RouteLocationNormalized定义更精确的类型：

import type { RouteLocationNormalized } from 'vue-router'

// 定义自定义路由参数类型
interface CustomRouteParams {
  id: string
}

// 扩展得到贴合业务的路由对象类型
type CustomRouteLocation = RouteLocationNormalized<CustomRouteParams>

export default defineNuxtRouteMiddleware((to: CustomRouteLocation, from: CustomRouteLocation) => {
  // 此时to.params.id会被正确推断为string类型，无类型警告
  if (to.params.id === '1') {
    return abortNavigation()
  }
  if (to.path !== '/') {
    return navigateTo('/')
  }
})

3. 使用Nuxt自动生成的路由类型（推荐） #

Nuxt 3会根据pages目录下的路由自动生成匹配项目实际情况的类型，你可以导入RouteLocation直接使用：

import type { RouteLocation } from '#app'

export default defineNuxtRouteMiddleware((to: RouteLocation, from: RouteLocation) => {
  if (to.params.id === '1') {
    return abortNavigation()
  }
  if (to.path !== '/') {
    return navigateTo('/')
  }
})

这种方式无需手动维护类型，会自动匹配你项目中所有路由的参数、query等定义。

内容的提问来源于stack exchange，提问作者Jamie Marshall