使用 TypeScript 和 unplugin-vue-router 时出现路由参数输入错误

Question

我正在使用 TypeScript 通过 Composition API 学习 Vue 3。我正在做的教程之一建议使用 unplugin-vue-router 根据文件命名/路径约定自动生成路由。该插件工作正常，但 TypeScript 对路由参数感到不安。例如，我有这个基本的 Vue 页面：

<script setup lang="ts">
import { useRoute } from 'vue-router'
const route = useRoute()
</script>

<template>
  <div>
    <h1>Page slug: {{ route.params?.slug }}</h1>
  </div>
</template>

TypeScript 突出显示

slug

并警告“类型 'Record | { catchAll: string; } | { slug: string; } | { id: string; }' 上不存在属性 'slug'。”

做了一些谷歌搜索，我在 unplugin-vue-router Github 网站上发现了这个确切的问题，但“使用类型缩小”的建议很模糊，在这种情况下并没有真正起作用，据我所知可以告诉。

使用路由参数和 unplugin-vue-router 时如何摆脱此 TypeScript 错误？

Answer 1

您可以提供一个类型来使用Route，如下所示：

const route = useRoute<'ProductDetails'>()

“ProductDetails”的类型来自 unplugin-vue-router 提供的 RouteNamedMap：

'ProductDetails': RouteRecordInfo<'ProductDetails', '/products/:id', { id: ParamValue<true> }, { id: ParamValue<false> }>,

但是，这种方法目前可能会导致以下 TypeScript 错误： 类型“ProductDetails”不满足约束“keyof RouteNamedMap”。