Uno de mis problemas cuando trabajo con VueJS es al crear rutas, especialmente si el proyecto se hace más grande y se convierte en un problema al tratar de mantener su route.ts o route.js. Todavía recuerdo un proyecto que tiene demasiadas páginas y tienes que actualizar tus rutas cuando creas una nueva página y tienes que actualizar tu archivo de ruta cada vez que eliminas una página solo para evitar que aparezcan errores.

Entonces comencé a buscar cómo hacer el enrutamiento automático usando archivos. Intentar buscar en Google fue difícil de encontrar porque la mayoría de los resultados que encontré en Internet son principalmente para el paquete web y la versión 2. Así que tuve que preguntarlo en la discusión del repositorio de Vue Github y obtuve una respuesta.

Presentamos Unplugin Vue Router, este es un enrutamiento escrito y basado en archivos para Vue 3. Y en realidad es fácil de configurar. Esto es experimental como lo indicaron en su archivo Léame de Github.

Primero creemos nuestro proyecto Vue desde cero. Como todos sabemos, podemos generar un proyecto ejecutando este comando y luego responder algunas opciones. Si no está familiarizado con cómo hacerlo, puede consultar Inicio rápido en la página de VueJs.

pnpm create vue@latest

Así que en este ejemplo así es como creé el proyecto.

pnpm create vue@latest

Vue.js - The Progressive JavaScript Framework

√ Project name: ... vue-auto-route
√ Add TypeScript? ... No / Yes
√ Add JSX Support? ... No / Yes
√ Add Vue Router for Single Page Application development? ... No / Yes
√ Add Pinia for state management? ... No / Yes
√ Add Vitest for Unit Testing? ... No / Yes
√ Add an End-to-End Testing Solution? » No
√ Add ESLint for code quality? ... No / Yes
√ Add Vue DevTools 7 extension for debugging? (experimental) ... No / Yes

Scaffolding project in D:\Projects\Testing\vue-auto-route...

Done. Now run:

  cd vue-auto-route
  pnpm install
  pnpm dev

Vamos a utilizar Select TypeScript. También habilité el enrutador para que regenerara automáticamente las páginas.

Vayamos a nuestro proyecto e instalemos las dependencias. Entonces, dependiendo del administrador de paquetes que hayas utilizado, puedes usarlo. Para mí estoy usando el pnpm y me está empezando a gustar. Ahora, una vez creado nuestro proyecto, teníamos que instalar unplugin-vue-router.

pnpm add -D unplugin-vue-router

Ahora, actualicemos vite.config.ts. Asegúrate de colocar el complemento en el índice 0.

import { fileURLToPath, URL } from "node:url";
import VueRouter from "unplugin-vue-router/vite";
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        VueRouter({
            /* options */
        }),
        // ⚠️ Vue must be placed after VueRouter()
        vue(),
    ],
    resolve: {
        alias: {
            "@": fileURLToPath(new URL("./src", import.meta.url)),
        },
    },

});

A continuación, actualicemos env.d.ts para que nuestro editor pueda encontrar fácilmente los tipos de nuestro paquete.

/// 
/// 

Entonces actualicemos nuestro enrutador index.ts en src/router/index.ts.

import { createRouter, createWebHistory } from "vue-router";
import { routes, handleHotUpdate } from "vue-router/auto-routes";

const router = createRouter({
    history: createWebHistory(import.meta.env.BASE_URL),
    routes,
});

if (import.meta.hot) {
    handleHotUpdate(router);
}

export default router;

Ahora que todo está hecho, ahora podemos crear el directorio src/pages, y en esta carpeta o directorio es donde agregamos nuestras páginas y automáticamente crea rutas basadas en la estructura del archivo. Si estás familiarizado con Nuxt, es algo parecido.

Vamos a crear una página acerca de en src\pages\about.vue.

Creemos nuestra página de inicio usando el índice en src\pages\index.vue.

Luego podemos ejecutar nuestra aplicación vue ejecutando el script de desarrollo. desarrollador pnpm. Vaya, si hace clic en Inicio, será redirigido a la página de inicio, si hace clic en Acerca de, será redirigido a Acerca de la página.

Ahora todo está configurado para ti. Si no está familiarizado con la estructura de carpetas del enrutador. Puede consultar este documento https://uvr.esm.is/guide/file-based-routing.html.

Intentemos agregar un componente slug como src/pages/blog/[id].vue con este contenido.

Ahora intentemos ejecutar pnpm dev nuevamente. Y cuando vayas a http://localhost:5173/blog/6 deberías recibir esto.

Increíble, ¿verdad? Espero que este breve blog te haya ayudado en tu viaje a VueJS. Que tenga un buen día.

Si disfrutas este artículo y quieres mostrar tu apoyo, puedes hacerlo fácilmente invitándome un café. ¡Su contribución es muy apreciada!

Si disfrutas este artículo y quieres mostrar tu apoyo, puedes hacerlo fácilmente invitándome un café. ¡Su contribución es muy apreciada!