Estoy creando una aplicación Vue.js 3 con Vite y vite-plugin-pages para el enrutamiento. https://github.com/hannoeru/vite-plugin-pages
¿Es posible tener una ruta dinámica con una parte estática?
eg /@[handle].vue Cuando hago esto, no funciona y en su lugar recurre a mi ruta catch-all [...all].vue
No quiero ponerlo en una subcarpeta, por lo que /@/[handle].vue no es una opción. Me gustaría el símbolo @ seguido de lo que venga después de ser un nombre de usuario dinámico.
Logré hacer esto en otra aplicación usando el enrutador Vue, pero no estoy seguro de cómo lograr lo mismo en el enrutamiento basado en carpetas a través de este complemento.
Cómo hice esto antes:
const router = new Router({ routes: [ { path: '/', name: 'Home', component: Home, children: [ { path: '/@:handle', name: 'Profile', component: () => import('../views/Profile.vue'), props: true, }, ], }, ] })Puede usar el gancho onRoutesGenerated del complemento para transformar las rutas antes de que se pasen a Vue Router.
La solución requiere nombrar los parámetros de la ruta dinámica con el prefijo @ , por lo que el nombre del archivo en su caso sería [@handle].vue :
pages/user/[@handle].vue La siguiente configuración de Vite cambia el nombre de los parámetros de ruta que comienzan con @ , de modo que la @ se mueve a la ruta justo antes del parámetro:
// 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) }, }), ], }) Entonces, la ruta de la path para el ejemplo anterior se transforma a partir de esto:
/user/:@handle.vue...a esto:
/user/@:handle.vue 👆