useRoute

Normal usage (in components)

If you have a [foo].vue page file, you can safely check the route name with the returned route object.

<script setup lang='ts'>

const route = useRoute();

if (route.name === 'foo') {
  console.log(route.params.foo) // types-check
}
</script>

But if you have a [foo]-[[bar]].vue page file, the bar param will be correctly infered as optional in the route object

<script setup lang='ts'>

const route = useRoute();

if (route.name === 'foo-bar') {
  console.log(route.params.foo) // string
  console.log(route.params.bar) // string | undefined
}
</script>

Assertion usage (in pages)

You can also invoke useRoute directly with a route name to have it type check its params. For exemple, if you're editing pages/profile/[id].vue, you can directly do this and save time.

<script setup lang='ts'>

const route = useRoute('profile-id');

console.log(route.params.id) // types-check
</script>

Typings for useLink follow the usage of other composables.

<script setup lang='ts'>

const link = useLink({to: '/profile/999'});
</script>
Edit this page on GitHub