I'm building a Vue.js 3 app with Vite and vite-plugin-pages for the routing. https://github.com/hannoeru/vite-plugin-pages
Is it possible to have a dynamic route with a static part to it?
e.g. /@[handle].vue
When I do this, it doesn't work and instead falls back to my catch-all route [...all].vue
I don't want to put it in a sub-folder, so /@/[handle].vue is not an option. I'd like the @ symbol followed by whatever comes after being a dynamic username.
I managed to do this in another application using Vue router but not sure how to achieve the same thing in folder-based routing via this plugin.
How I did this before:
const router = new Router({
routes: [
{
path: '/',
name: 'Home',
component: Home,
children: [
{
path: '/@:handle',
name: 'Profile',
component: () => import('../views/Profile.vue'),
props: true,
},
],
},
]
})
You could use the plugin's onRoutesGenerated hook to transform the routes before they're passed to Vue Router.
The solution requires naming the dynamic route parameters with the @ prefix, so the filename in your case would be [@handle].vue:
pages/user/[@handle].vue
The following Vite config renames route parameters that start with @, so that the @ is moved into the path right before the parameter:
// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Pages from 'vite-plugin-pages'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
Pages({
onRoutesGenerated(routes) {
const transformRoute = route => ({
...route,
path: route.path.replace('/:@', '/@:'),
children: route.children?.map(transformRoute) ?? [],
})
return routes.map(transformRoute)
},
}),
],
})
So the route path for the example above is transformed from this:
/user/:@handle.vue
...to this:
/user/@:handle.vue
๐