vue-router - TypeScript 安全路由名称？

Question

考虑以下代码:

const router = useRouter()

await router.push({
  name: 'NonExistingRoute', // no typescript error ):
}) 

给出了一个不存在的路由名称，但没有发生 TypeScript 错误。相反，该问题只会在运行时被注意到。有什么方法可以得到编译时错误吗？

Answer 1

也许你可以把它包装在一个只接受类型化路由字符串的实用函数中

const router = useRouter()
export type NamedRoute = "login" | "logout" | "user-profile";

export async function goToNamedRoute(name: NamedRoute): Promise<void> {
    return router.push({name});
}