restricting parameters

[Theo-Steiner]

Background

meta frameworks like svelte kit allow you to define a matcher for params in your page if you want to show a page only for certain routes.
https://kit.svelte.dev/docs/advanced-routing#matching

Given a directory structure like this

pages index.vue [vegetable].vue [fruit].vue 

I want to restrict the possible parameters for both vegetable and fruit, to not accidentally show the wrong page.
Since writing a general regex for vegetables/fruit is rather difficult, let's say I just want to support tomato | potato and watermelon | strawberry, how do I write a matcher with unplugin-vue-router?

[posva]

You use definePage() to override the path and override the regexp of the parameter:

<script setup lang="ts> definePage({  path: '/:fruit(watermelon|strawberry)', }) </script>

If the match is more complex, you will need to setup a navigation guard so you can freely do any check:

<script setup> definePage({  beforeEnter(to) {  if (Number.isNaN(Number(to.params.id))) {  console.log('invalid param id', to.params.id)  return false  }  }, }) <script>

[mkeyy0]

@posva Regarding the first one, it works, but it would be nice to reflect it in the types too. For example, instead of getting route params type as string | number, it would be nice to get "watermelon" | "strawberry". Is it possible?

[posva]

It will with #700