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>