Vue js，“路由对象”类型？

Question

如何获取 ts 构建的实际“路由对象”类型。

路线对象

我正在遵循下面的 nuxt 指南，但无法弄清楚如何获取 Route 对象，因此我没有在

implicit any

和

to

参数上收到 ts

from

类型警告。

export default defineNuxtRouteMiddleware((to, from) => {
  if (to.params.id === '1') {
    return abortNavigation()
  }
  // In a real app you would probably not redirect every route to `/`
  // however it is important to check `to.path` before redirecting or you
  // might get an infinite redirect loop
  if (to.path !== '/') {
    return navigateTo('/')
  }
})

Nuxt 指南

Answer 1

我昨晚结束了深潜。 不知道为什么我不按照 @phil 的建议检查该函数。 显然，这是明智之举，但我却不是。 然而，我的长期调查揭示了一些有趣的事情。

1. 从 vue 公开的可补偿对象中快速获取类型的“规范”是使用 ReturnType

type Route = ReturnType<typeof useRoute>
type Router = ReturnType<typeof useRouter>
type MyStore = ReturnType<typeof useMyStore>
type Attrs = ReturnType<typeof useAttrs>
// ... ect

完整的实现如下所示：

import { useRoute } from 'vue'
type Route = ReturnType<typeof useRoute>

export default defineNuxtRouteMiddleware((to:Route, from:Route) => {
  if (to.params.id === '1') {
    return abortNavigation()
  }
  // In a real app you would probably not redirect every route to `/`
  // however it is important to check `to.path` before redirecting or you
  // might get an infinite redirect loop
  if (to.path !== '/') {
    return navigateTo('/')
  }
})

但是......在 NUXT 中这是一个坏主意。 因为您应该使用 NUXT 自动导入来利用 NUXT 的 Tree Shaking 和 ssg 编译功能。 NUXT 语法糖可以手动覆盖其中的大部分内容。 所以在 NUXT 中这样做：

import