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> 

は、私は他の方法を知らない）