Vue2中的异步组件

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> 

我不知道其他的方式）