RouterLink & asyncComponent - Tylung/vue-apuntes GitHub Wiki
La opción defineAsyncComponent, lo que hace es crear un componente que se va a cargar solo cuando sea necesario, básicamente lo mismo que el lazyLoad
Archivo:
<template>
<NavBar />
<img alt="Vue logo" src="./assets/logo.png">
<router-view />
</template>
<script>
import { defineAsyncComponent } from 'vue'
export default {
name: 'App',
components: {
NavBar: defineAsyncComponent(() => import(/* webpackChunkName: "NavBar"*/ '@/modules/shared/components/NavBar.vue') )
}
}
</script>
Los <router-links>
son muy similares a los <a>
de html
Archivo: src/modules/shared/components/NavBar.vue
<template>
<div>
<router-link to="/">PokemonList</router-link>
<router-link to="/id">Pokemon by Id</router-link>
<router-link to="/about">About</router-link>
</div>
</template>
El atributo to
le indica hacia donde va a ir el link, es como el href del