Custom Router Links

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.

Crea una cuenta y continúa aprendiendo 🚀

Custom Router Links