Vue2中的异步组件

Question

我想让我的所有路由显示导航栏和页脚，除了“登录”路由-它应该只包含登录组件的内容。

在App.vue (我的根组件)中，我有：

<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>

它可以工作，但正如您所看到的，我想“延迟加载”我的AppNav和AppFooter组件，以便只有在需要它们时才会下载它们(当路由名称不是“登录”时)。不幸的是，这不起作用-当我去登录路线，这些组件仍然是从服务器下载。

如何在本例中实现延迟加载组件？

Answer 1

如果你使用的是webpack，它看起来是这样的：

我不知道其他方式)