Configuración y Ruta /cart

¿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.

Crea una cuenta y continúa aprendiendo 🚀

Configuración y Ruta /cart