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

⚠️ **GitHub.com Fallback** ⚠️