Currently, I am delving into Vue 3 with the Composition API and TypeScript. In one of the tutorials I am following, there is a recommendation to employ unplugin-vue-router for automatic generation of routes based on certain file naming/path conventions. Although the plugin functions properly, I am encountering issues with TypeScript when it comes to route parameters. For instance, consider this simple Vue page:
<script setup lang="ts">
import { useRoute } from 'vue-router'
const route = useRoute()
</script>
<template>
<div>
<h1>Page slug: {{ route.params?.slug }}</h1>
</div>
</template>
The problem arises when TypeScript flags `slug` and displays a warning stating that "Property 'slug' does not exist on type 'Record<never, never> | { catchAll: string; } | { slug: string; } | { id: string; }'."
https://i.sstatic.net/oJf4p53A.png
After conducting some research online, I stumbled upon an identical issue on the unplug-vue-router Github repository. However, the suggestion to "use type narrowing" seems vague and has not resolved the situation in my case.
How can I resolve this TypeScript error occurring while using route parameters and unplugin-vue-router?