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> 

我不知道其他的方式）