[Vue] Load components when needed with Vue async components

In large applications, dividing the application into smaller chunks is often times necessary. In this lesson, we will look at how vue loads async components into your application.

<template>

  <div>

    <section class="pa2">

      <h2>Lazy loading...</h2>

      <button @click="show = true">Lazy load</button>

      <div v-if="show">

        <Async></Async>

      </div>

    </section>

  </div>

</template>

<script>

  const Async = resolve => {

    console.log('loading...')

    setTimeout(() => {

      require(['~components/async.vue'], resolve)

      console.log('loaded')

    }, 1000)

  }

  export default {

    components: {

      Async

    },

    data () {

      return {

        show: false

      }

    }

  }

</script>

巴特西

[Vue] Load components when needed with Vue async components

最新文章

热门文章