我正在使用 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做了一些谷歌搜索,我在 unplugin-vue-router Github 网站上发现了这个确切的问题,但“使用类型缩小”的建议很模糊,在这种情况下并没有真正起作用,据我所知可以告诉。
使用路由参数和 unplugin-vue-router 时如何摆脱此 TypeScript 错误?
您可以提供一个类型来使用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”。