Типизированные маршруты v4.4.0+
DANGER
‼️ Эксперементальная функция
Можно настроить маршрутизатор так, чтобы у вас была карта типизированных маршрутов. Хотя это можно сделать вручную, рекомендуется использовать плагин unplugin-vue-router, чтобы автоматически генерировать маршруты и типы.
Ручная настройка
Вот пример того, как вручную настраивать типизированные маршруты:
ts
// импортируйте тип `RouteRecordInfo` из vue-router для создания маршрутов
import type { RouteRecordInfo } from 'vue-router'
// Определите интерфейс маршрутов
export interface RouteNamedMap {
// каждый ключ является названием
home: RouteRecordInfo<
// тоже самое название
'home',
// это путь, он будет отображаться при автозаполнении
'/',
// это необработанные параметры. В данном случае не допускаются никакие параметры
Record<never, never>,
// это нормализованные параметры
Record<never, never>
>
// повторите для каждого маршрута..
// Заметьте, вы можете называть их как угодно.
'named-param': RouteRecordInfo<
'named-param',
'/:name',
{ name: string | number }, // необработанное значение
{ name: string } // нормализованное значение
>
'article-details': RouteRecordInfo<
'article-details',
'/articles/:id+',
{ id: Array<number | string> },
{ id: string[] }
>
'not-found': RouteRecordInfo<
'not-found',
'/:path(.*)',
{ path: string },
{ path: string }
>
}
// Наконец, вам нужно будет дополнить типы Vue Router этой картой маршрутов
declare module 'vue-router' {
interface TypesConfig {
RouteNamedMap: RouteNamedMap
}
}
Совет
Это действительно утомительно и чревато ошибками. Поэтому рекомендуется использовать unplugin-vue-router для автоматической генерации маршрутов и типов.