Ошибка ввода параметра маршрута с помощью TypeScript и unplugin-vue-router
Я изучаю Vue 3 с API композиции, используя TypeScript. В одном из руководств, которые я делаю, предлагается использовать 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 и предупреждает, что «Свойство 'slug' не существует для типа 'Record<never, Never> | { catchAll: string; } | { slug: string; } | { id: string; }'».
Погуглив, я нашел именно эту проблему как проблему на сайте unplugin-vue-router Github, но предложение «использовать сужение типа» расплывчато и, насколько я понимаю, на самом деле не работает в этой ситуации. могу сказать.
Как я могу избавиться от этой ошибки TypeScript при использовании параметров маршрута и unplugin-vue-router?
Ответы 1
Вы можете указать тип для useRoute следующим образом:
const route = useRoute<'ProductDetails'>()
Тип ProductDetails берется из RouteNamedMap, предоставленного unplugin-vue-router:
'ProductDetails': RouteRecordInfo<'ProductDetails', '/products/:id', { id: ParamValue<true> }, { id: ParamValue<false> }>,
Однако этот подход в настоящее время может привести к следующей ошибке TypeScript: Тип «ProductDetails» не удовлетворяет ограничению «keyof RouteNamedMap».
Просматривая документацию, вы можете найти:
// these are all valid
let userWithId = useRoute() as RouteLocationNormalizedLoaded<'/users/[id]'>
userWithId = useRoute<'/users/[id]'>()
// 👇 this one is the easiest to write because it autocompletes
userWithId = useRoute('/users/[id]')
userWithId.params
Так что может быть один для вас.
Самым простым был userWithId = useRoute('/users/[id]'), который отлично работает, хотя кажется немного нелогичным указывать маршрут, когда весь смысл unplugin-vue-router состоит в том, чтобы сделать маршрутизацию динамической на основе соглашений. Спасибо!
Предложение состоит в том, что вам нужно проверить форму
params, потому что это может не быть объект со свойствомslug. Попробуйте{{ ("slug" in route.params && route.params.slug) }}