Async components in Vue2

Question

I’d like to have all my routes to show Navbar and Footer except “Login” route - it should contain ONLY Logins component content.

In App.vue (my root component) I have this:

<template>
    <router-view v-if="$route.name === 'Login'"></router-view>
    <div v-else>
        <app-nav></app-nav>
        <div class="container">
            <transition name="bounceLeft" mode="out-in" appear>
                <router-view :key="$route.fullPath"></router-view>
            </transition>
        </div>
        <app-footer></app-footer>
    </div>
</template>
<script>
    export default 
    {
        components:
        {
            'AppNav': () => import( "@/components/AppNav.vue" ),
            'AppFooter': () => import( "@/components/AppFooter.vue" )
        }
    }
</script>
<style>
</style>

It works, but as you can see, I want to “lazy load” my AppNav and AppFooter components, so they will be downloaded ONLY when they are needed (when routes name IS NOT ‘Login’). Unfortunately this doesnt work - when I go to Login route, these components are still downloaded from the server.

How can I achieve lazy-loading component in this example?

U Fleming U Fleming · Accepted Answer · 2017-09-14T17:24:12

If you use webpack it will looks like this:

<script>
export default 
{
    components:
    {
        'AppNav': () => System.import( "@/components/AppNav.vue" ),
        'AppFooter': () => System.import( "@/components/AppFooter.vue" )
    }
} </script>

I don't know other way )

Async components in Vue2

1 Answers