Catch-all route
zanmato opened this issue ยท 4 comments
๐ฌ Question here
Is it possible to add a catch-all route like: https://nextjs.org/docs/pages/building-your-application/routing/dynamic-routes#catch-all-segments
E.g. /categories/[...slug]
would match /categories/1
and /categories/1/2
Your Environment
fastify/vite & fastify/vue
You can use a wildcard
for it (e.g. /categories/*
).
Depending on your setup, you might need to set it after other routes that share the same resource.
Just be cautious that this kind of wildcard routes (or ones that comes out from a Regex) are expensive in terms of performance
Where would I put that, let's say in the context of the vue-kitchensink example? I tried altering the param regex to allow wildcards, e.g. naming a file [*].vue. But it doesn't seem to work, perhaps because the vue router expects /:slug*
and fastify just /*
?
Sorry, for that I'm clueless; not really sure how they work ๐
For a workaround I changed the param pattern to allow + at the end
viteFastifyVue({ paramPattern: /\[([\w]+\+?)\]/ }),
I named my file [slug+].vue
which results in a /:slug+
route which is compatible with vue-router, and added a hook to replace it with a wildcard before it is added to the fastify router:
server.addHook("onRoute", (route) => {
route.url = route.url.replace(/\:[^\+]+\+/, "*");
});