Espera un momento 🎁 ...
¿Te gustaría aprender a programar, gratis?
Sólo debes registrarte 😉.
Crea una cuenta y continúa aprendiendo 🚀
Regístrate o inicia sesión para continuar aprendiendo:
Frontend
Aprendiz
Configuración y Ruta /cart
En esta lección configuramos nuestro Vue Router y definimos nuestras primeras rutas. El resultado es que ya podemos navegar a través de ellas!
Instalación de Vue Router
Para introducir rutas en nuestro proyecto de Vue, visitamos la documentación oficial de Vue Router. Vue Router está bajo el subdominio router de vuejs.org. Es el router oficial para Vue.js.
Para instalarlo con npm:
npm install vue-router@<versión>
En este caso, no es necesario instalarlo porque ya está incluido en nuestro proyecto. Podemos verificarlo en el archivo package.json.
Uso de Vue Router
Vue Router permite definir rutas y mostrar contenido según la ruta seleccionada.
En la documentación, se muestra un ejemplo con dos links. Para definir enlaces usamos router-link y para mostrar contenido usamos router-view.
Ejemplo:
<router-link to="/">Go to Home</router-link>
<router-link to="/about">About</router-link>
<router-view></router-view>
Cuando el usuario hace clic en un router-link, el componente correspondiente a esa ruta se muestra en router-view.
Configuración del Router
Nuestro proyecto de Vue ya incluye Vue Router. Revisemos el código inicial en el archivo main2.
En este archivo, se importan varias dependencias, incluida vue-router.
Para usar Vue Router, invocamos el método use en nuestra instancia de Vue:
app.use(router);
El router se define en un archivo separado dentro de la carpeta router, en el archivo index.js.
Creación del Router
Vue Router proporciona la función createRouter. Para configurarlo, pasamos un objeto con las opciones necesarias.
import { createRouter, createWebHistory } from 'vue-router';
const router = createRouter({
history: createWebHistory(),
routes: [
{ path: '/', name: 'home', component: HomeView },
{ path: '/about', name: 'about', component: () => import('@/views/AboutView.vue') }
]
});
Lazy Loading
La función import() permite cargar componentes solo cuando son requeridos, reduciendo el peso inicial de la aplicación.
{ path: '/about', name: 'about', component: () => import('@/views/AboutView.vue') }
Organización de Componentes
Por convención:
- Los componentes de vista se guardan en la carpeta
views. - Se nombran con el sufijo
View.
Ejemplo de componentes:
-
HomeView.vue -
AboutView.vue -
CartView.vue
Adaptación del Router
Definimos nuevas rutas para nuestro carrito de compras:
{ path: '/cart', name: 'cart', component: CartView }
Limpieza de Vistas
Eliminamos contenido innecesario en HomeView y AboutView, dejando solo:
<template>
<h1>HomeView</h1>
</template>
Implementación en App.vue
Modificamos App.vue para incluir los enlaces y la visualización de rutas:
<template>
<header>
<router-link to="/">Home</router-link>
<router-link to="/cart">Cart</router-link>
<router-link to="/about">About</router-link>
</header>
<router-view></router-view>
</template>
Integración con main.js
En main.js, aseguramos que App.vue sea el componente principal:
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
const app = createApp(App);
app.use(router);
app.mount('#app');
Verificación en el Navegador
Al probar en el navegador:
-
HomemuestraHomeView. -
CartmuestraCartView. -
AboutmuestraAboutView. - La URL cambia según la selección.
Así, hemos configurado correctamente Vue Router en nuestro proyecto.
Esta lección no cuenta con recursos adicionales.
Si crees que hace falta algo, o necesitas ayuda, puedes publicar una pregunta en el foro.
¿Cómo podemos hacer uso de Vue Router para introducir rutas sobre nuestro proyecto? Vamos a visitar la documentación oficial de Vue Router. Vue Router se encuentra bajo este subdominio router de "vuejs.org" Vue Router. Ese router oficial para “v.js”. Le damos click al botón de “get started” y vemos que para poder usar Vue Router tenemos que instalarlo primero. La instalación a través de npm funciona de esta manera "npm install" seguido del nombre de la dependencia, que en este caso de "vue-router" y luego de la "@" podemos indicar su versión. En nuestro caso no necesitamos instalarlo porque de hecho ya se encuentra cargado sobre nuestro proyecto. Podemos verificar ello visitando nuestro archivo "package.json". Aquí vemos que estamos haciendo uso de "vue-router". Si ya tenemos "vue-router" instalado, ya podemos empezar a usarlo. ¿Cómo funciona? "vue-router". "Vue-router" nos permite definir rutas y mostrar un contenido para cada ruta. En el ejemplo de la documentación se tienen dos links. Para definir links usamos "router-link" y para mostrar el contenido usamos "router-view". Entonces aquí tenemos un link que lleva la página de inicio. "go to home", aquí se está usando la ruta raíz para ir a la página de inicio y se está usando la ruta "about" para ir a la página correspondiente. "About" significa “acerca de”. Entonces podemos usar "router-link", escribir "to", indicar la ruta a la que queremos enviar al usuario y cuando el usuario haga click sobre ese "router-link" se mostrará aquí en "router-view" el componente correspondiente a la ruta. O sea que para cada ruta nosotros podemos decidir qué componente queremos mostrar. Cuando nosotros creamos nuestro proyecto de Vue, éste vino configurado con "vue-router", entonces revisemos el código inicial con el que vino nuestro proyecto. Nosotros lo guardamos anteriormente en un archivo llamado "main2" y como vemos, todo esto es lo que traía además de vue. Se hacía "import" de "pinia", todavía no vamos a usar pinia por el momento, pero sí que vamos a empezar a usar "vue-router". ¿De qué manera podemos empezar a usar "vue-router"? Simplemente tenemos que invocar el método "use" sobre nuestra instancia de vue y pasarle un router. En este caso se estaba definiendo un router en un archivo aparte para mantener un mayor orden y se estaba importando de esta manera. Si nos fijamos en el lado izquierdo, tenemos una carpeta “router” que viene en el proyecto. Ese carpeta "router" contiene un archivo "index", entonces con este “import” se estaba accediendo a este archivo y luego se estaba declarando su uso de esta manera. Vamos a abrir entonces nuestro "router". ¿De qué manera se define un router? "Vue-router" nos proporciona acceso a una función de "createRouter". A esta función "createRouter" tenemos que pasarle un objeto con la configuración que queremos para nuestro "router". Lo usual es definir “history” de esta manera Este "createWebHistory" es también una función del "v.router", como podemos ver y lo que nos permite es guardar un historial de las rutas que hemos ido visitando, de tal manera que si un usuario presiona el botón de back puede volver a la ruta que se encontraba viendo anteriormente. El mismo objeto de configuración acepta un atributo "routes" que nos permite definir las rutas que queremos para nuestro proyecto. A este atributo "routes" de la configuración de nuestro "router" le pasamos un arreglo conteniendo objetos donde cada objeto va a representar una ruta y cada ruta estará asociada a un componente. A las frutas les podemos poner un nombre. Este nombre funciona como un alias, de tal manera que no tenemos que recordar cuál es el path. Podemos simplemente usar el alias. En el futuro, nosotros tal vez queramos cambiar el path de una ruta, pero el "name" seguirá siendo el mismo y por lo tanto nuestro código seguiría funcionando. Por eso es importante definir nombres para las rutas, no solamente un path. Adicionalmente, tenemos que definir qué componente queremos mostrar para la ruta, en este caso, para la ruta raíz se está mostrando "HomeView" y para el path "about", que tiene como nombre "about", se está mostrando a "AboutView". Si prestamos atención, este objeto y este objeto tiene una diferencia, la diferencia es que aquí el componente se está importando en el momento en que se declara. Mientras que aquí debajo se está usando esta sintaxis y se está importando de manera dinámica. Lo que esto ocasiona es que el archivo de "AboutView" genere un archivo distinto y que este archivo que contiene solamente a este componente se descargue bajo demanda. A esta técnica se le conoce como “lazy loading”. Lazy significa perezoso. Entonces la técnica de "lazy loading" consiste en descargar archivos sólo cuando son requeridos. Entonces, cuando un usuario entra a la página de inicio, cargarán “HomeView”, pero no se descargará el código de "AboutView" hasta que se requiera. ¿Por qué terminan en “View”? Esto es porque generalmente se acostumbra a tener componentes que terminen en “View” para representar que se trata de una vista que está asociada a una ruta. Pero en realidad aquí podría llevar cualquier nombre. Por convención, las vistas se guardan en una carpeta "views", como aquí podemos ver. Entonces tenemos "HomeView" y tenemos "AboutView". Nosotros vamos a adaptar este "router" a nuestras necesidades. En nuestro caso, vamos a tener "HomeView" para la página de inicio y vamos a tener otra ruta para nuestro carrito de compras. Lo llamaremos "cart" y por lo tanto vamos a definir un "CartView". Nos aparece resaltado porque este componente no se encuentra definido. Lo siguiente que vamos a hacer es eliminar el contenido que tienen estas vistas. Por ejemplo, “HomeView” veníausando un componente llamado "TheWelcome" que estaba definido por View. Vamos a dejar "HomeView" vacío. Simplemente vamos a escribir aquí el texto "HomeView" y ahora nos vamos a dirigir a "AboutView" y vamos a eliminar sus estilos y vamos a escribir simplemente un mensaje que diga "AboutView". Siguiendo la misma idea, tenemos "HomeView", "AboutView" y ahora vamos a crear un componente más dentro de "views" que se va a llamar "CartView.vue”. Y simplemente va a ser un template que va a contener un texto diciendo "CartView". Lo que queremos ahora es simplemente verificar que se puede navegar entre las páginas. Tenemos aquí nuestro "router" y estamos definiendo tres rutas. La ruta Home se asocia con "HomeView", la ruta Cart con "CartView" y la ruta de About con “AboutView”. Esto define un "router", pero tenemos que usarlo. Para usarlo nos dirigimos a nuestro archivo "main" y vamos a escribir por aquí "app.use". Y aquí vamos a escribir "router". Este router lo tenemos que importar desde la carpeta en la que se encuentra, que en este caso es "router". No es necesario escribir "/index" porque automáticamente se buscará de esa manera. Entonces, con esto tenemos la definición de nuestro "router". Hemos declarado que queremos usar nuestro router, pero nuestra aplicación principal sigue siendo "ProductList" y "ProductList" no contiene enlaces. Lo que vamos a hacer ahora es revisar el componente "app.vue" que vino creado con nuestro proyecto desde el inicio, vamos a empezar a limpiar un poco para quedarnos solo con lo que necesitamos. Este componente "app.vue" tiene estilos, tiene un etiqueta “style”. Nosotros vamos a eliminar los estilos porque no queremos escribir códigos CSS propio. Queremos simplemente usar los componentes que Vuetify nos proporciona. Lo siguiente que haremos es eliminar este componente "HelloWorld". Ya no lo queremos. Vamos a eliminar también el logo de Vue y nos vamos a quedar simplemente con una etiqueta "header" que contiene dos "RouterLink". Y también nos vamos a quedar con esta etiqueta "router-view". En la documentación vimos ejemplos sobre esto. Usamos "router-link" para crear un enlace a una ruta y usamos "router-view" para mostrar aquí el contenido de la ruta seleccionada. ¿Se puede escribir así con guiones todo en minúsculas o se puede escribir con este formato llamado "PascalCase", donde la inicial de cada palabra va en mayúsculas. Así como tenemos una ruta raíz y "about", tenemos también una ruta "cart" que la hemos definido hace poco. Entonces ahora nos vamos a nuestro archivo "main" y vamos a hacer que en nuestra aplicación de Vue se cree a partir del componente “app”, importamos el componente principal de esta manera, ya no vamos a usar "ProductList", vamos a usar app como nuestro componente principal, ¿Qué contiene app? Simplemente tres enlaces y un "router-view". Este "router-view" va a mostrar el componente que corresponda, es decir, on view, carpio o a vatio. Si nos vamos a nuestro navegador vemos esto, tenemos tres enlaces y debajo tenemos el contenido del componente "HomeView". Si damos click a "cart" vemos que la URL y se actualiza a la ruta correspondiente y el contenido también. Si damos click en "about" se actualiza la URL y también el componente que se está mostrando. Tenemos tres componentes y tenemos tres rutas.
¿Tienes dudas?
Publicar preguntaRegístrate
Inicia sesión para llevar un control de tu progreso.
Capítulos
Estás viendo un capítulo de la serie Aprende Vue 3, Vite, VueRouter, Vuetify, Pinia y TypeScript