Question

除了“登录”路线之外，我想让我的所有路线显示Navbar和Footer - 它应该只包含登录组件内容。

在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，它将如下所示：

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

我不知道其他方式）

Vue2中的异步组件

1 个答案: