CustomLink Component - Tylung/vue-apuntes GitHub Wiki

Este componente es como un router-view hecho a mano con un componente de Vue

NavBar

Antes de hablar del CustomLink debemos de hablar de su padre el NavBar que le da los parámetros para que pueda funcionar.

La razón de porque el link es un objeto es porque al momento de crear el CustomLink que estamos haciendo, vamos a recibir un arreglo de links que recorreremos con un v-for, ademas de que se necesitan trabajar con los atributos de cada link

Archivo: src/modules/shared/components/NavBar.vue

La key es el link.to porque tiene que ser unica por item y cada link va a ir a una direccion diferente.

<template>

    <div>
        <CustomLink 
            v-for="link in links" 
            :key="link.to" 
            :link="link"
        />
    </div>

</template>

El arreglo de links se define en la parte del script como una propiedad reactiva para que la pueda acceder el CustomLink al pasarla como parametro

<script>
import { defineAsyncComponent } from 'vue'
export default {
    data() {
        return {
            links: [
                { to: '/home', name: 'Pokemons'},
                { to: '/pokemonid/50', name: 'Por ID'},
                { to: '/about', name: 'About'},
                { to: 'https://google.com', name: 'Google'},
            ]
        }
    },
    components: {
        CustomLink:  defineAsyncComponent(() => import(/* webpackChunkName: "CustomLink"*/ '@/modules/shared/components/CustomLink.vue') )
    }
}
</script>

El componente se define como asyncComponent para que sea renderizado cuando sea necesario

CustomLink

Archivo: src/modules/shared/components/CustomLink.vue

Primeramente se verifica si es un link externo, es decir si es una pagina externa a mi app y se le coloca una clase y el link es un objeto, porque tiene varias propiedades o atributos como el to y el name

<template>
    <a
        v-if="isExternalLink"
        class="normal-link" 
        :href="link.to" target="_blank">
        {{link.name}}
    </a>    
   ... 
</template>
<script>
export default {
        props:{
            link: {
                type: Object,
                required: true
            }
        },
        computed: {
            isExternalLink() {
                return this.link.to.startsWith('http')
            }
        }
    }
</script>

Si no es un link externo, se coloca un router-link con el to de igual manera haciendo referencia a la propiedad to del objeto link y el href es el que expone a este router link, es decir la direccion a la que apunta, tambien se evalua si esta activo el link y se le coloca una clase en base a eso

<template>
   ...
    <router-link 
        v-else 
        :to="link.to"
        v-slot="{ href, isActive }"> 
            <!-- {{ link.name }}  -->
        <a  :class="isActive? 'is-active' : 'normal-link'" 
            :href="href">
                {{ link.name }} 
        </a>
    </router-link>
</template>
⚠️ **GitHub.com Fallback** ⚠️