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
Custom Router Links
Veamos cómo podemos usar la propiedad custom sobre un elemento RouterLink para tener mayor control sobre la navegación y los estilos.
Modificación de los RouterLink en el componente App
Hemos mencionado que estos botones no hacen nada. Los RouterLink están aquí.
Vamos a ver cómo podemos hacer que los RouterLink tengan este diseño en nuestro componente App, que es nuestro componente principal.
Nos dirigimos a app-bar y vemos que aquí tenemos los v-btn. Estos v-btn son botones que no hacen nada y, por separado, tenemos los RouterLink.
Los RouterLink gestionan el evento de click y en su interior son simples textos. Entonces, lo que vamos a hacer es modificar el contenido de los RouterLink.
Este botón lo usaremos para este RouterLink y haremos lo mismo para cart y about.
Aplicación de estilos y problemas detectados
El RouterLink puede tener cualquier diseño. El diseño se definirá en su interior.
Guardamos cambios y al volver nos encontramos con esto: los enlaces ya funcionan.
Sin embargo, hay un estilo que se está aplicando sobre ellos y que anteriormente no se tenía.
Lo que sucede aquí es que el RouterLink funciona como una etiqueta <a>. Es decir, es como si tuviésemos un <a> encerrando un botón.
Los estilos de este botón resultan afectados por los estilos por defecto que tienen los enlaces.
Esto lo podemos verificar dando click derecho al botón y usando la opción de inspect para inspeccionar el elemento.
Aquí vemos nuestro botón y vemos que este botón se encuentra dentro de una etiqueta <a>, lo que termina generando los estilos no deseados.
Solución con Vue 3: Uso de v-slot y navigate
Para corregir esto en Vue 3, podemos usar v-slot y acceder a la función navigate, que permite navegar a la ruta deseada.
Si tenemos acceso a navigate, podemos usar click e invocar navigate.
Esto hará que, cuando se haga click sobre el botón, se navegue hacia el enlace a través de un evento de click, sin la necesidad de crear una etiqueta <a>.
A esta personalización debemos también agregar la propiedad custom al RouterLink.
Resultado final
Guardamos y, como vemos, el botón de home ya no se ve afectado por los estilos de enlace.
Si inspeccionamos estos elementos, veremos que:
- Hay una etiqueta
<a>paracart. - Hay una etiqueta
<a>paraabout, encerrando a los botones decartyaboutrespectivamente. - Para nuestro botón de
home, elRouterLinkno está generando una etiqueta<a>.
Como esto funciona, aplicamos lo mismo para los otros tres enlaces que tenemos.
La propiedad custom nos da un mayor control sobre lo que hace el RouterLink.
Al guardar, tenemos este resultado: podemos navegar y nuestros enlaces ya funcionan.
Esta lección no cuenta con recursos adicionales.
Si crees que hace falta algo, o necesitas ayuda, puedes publicar una pregunta en el foro.
Hemos mencionado que estos botones no hacen nada. Los "RouterLink" están aquí. Vamos a ver cómo podemos hacer que los "RouterLink" tengan este diseño en nuestro componente "App", que es nuestro componente principal ahora, nos dirigimos a "app-bar" y vamos a ver que aquí tenemos los "v-btn". Estos "v-btn" son botones que no hacen nada y por separado tenemos los "RouterLink". Los "RouterLink" gestionan el evento de click y en su interior son simples textos, entonces lo que vamos a hacer es modificar el contenido de los "RouterLink", entonces este botón lo usaremos para este "RouterLink" y haremos lo mismo para “cart” y haremos lo mismo para "about". El "RouterLink" puede tener cualquier diseño. El diseño se definirá en su interior. Guardamos cambios y al volver nos encontramos con esto. Tenemos que los enlaces ya funcionan. Sin embargo, hay un estilo que se está aplicando sobre ellos y que anteriormente no se tenía. Lo que pasa aquí es que el "RouterLink" funciona como una etiqueta A si este "RouterLink" funciona como si fuera un enlace. O sea, es como si tuviésemos esto encerrando a un botón. Los estilos de este botón resultan afectados por los estilos por defecto que tienen los enlaces. Esto que menciono lo podemos verificar dando click derecho al botón y usando la opción de "inspect" para inspeccionar el elemento. Aquí vemos nuestro botón y vemos que este botón se encuentra dentro de una etiqueta A, que es lo que termina generando los estilos. Para corregir esto en Vue 3, nosotros podemos usar aquí "v-slot" y acceder a la función "navigate", que es lo que permite que se navegue a la ruta que se quiere. Entonces, si nosotros tenemos acceso a este "navigate", luego podemos usar aquí click e invocar "navigate". Esto hará que cuando se haga click sobre el botón se navegue hacia el enlace que queremos a través de un evento de click, sin la necesidad de crear una etiqueta A, a esta personalización, tenemos también que agregar "custom". Tenemos también que agregar la propiedad "custom" a este "RouterLink". Vamos a guardar y como vemos, el botón de "home" ya no se ve afectado por los estilos de enlace. Si inspeccionamos estos elementos, vamos a ver que hay una etiqueta A para "cart", una etiqueta A para "about" encerrando a los botones de "cart" y "about" respectivamente. Pero para nuestro botón de "home" el "RouterLink" no está generando una etiqueta A Como esto funciona, vamos a aplicar lo mismo para los otros tres enlaces que tenemos. Esta propiedad de "custom" nos da un mayor control sobre lo que hace el "RouterLink". Al guardar tenemos este resultado, podemos navegar y nuestros enlaces ya funcionan.
¿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