vueはルートの怠惰なロードとコンポーネントの怠惰なロードの方式を実現します。

一、なぜルートを使って怠惰にロードしますか？
お客様により良い体験をするために、ヘッドセットのロード速度がもっと速く、ホワイトスクリーンの問題を解決します。
二、定義
怠惰ロードは簡単に言えば、遅延荷重または必要に応じてロードします。つまり必要な時にロードします。
三、使う
一般的な不精負荷方式は、vue非同期コンポーネントとES中のimportを使用する方法の2つがあります。
1、怠惰でロードしていません。vueのルートコードは以下の通りです。

　 import Vue from 'vue'
        import Router from 'vue-router'
        import HelloWorld from '@/components/HelloWorld'

        Vue.use(Router)

        export default new Router({
         routes: [
          {
           path: '/',
           name: 'HelloWorld',
           component:HelloWorld
          }
         ]
        })

2、vue非同期コンポーネントは怠惰なロードを実現する。
方法は以下の通りです。component：resolve=>(require([' '])，resolve)

import Vue from 'vue'
import Router from 'vue-router'
　　/*          HelloWorld   */
Vue.use(Router)

export default new Router({
 routes: [
  {
   path: '/',
   name: 'HelloWorld',
   component: resolve=>(require(["@/components/HelloWorld"],resolve))
  }
 ]
})

3、ESから提出されたimport方法（--------）
方法は以下の通りです。const HelloWorld = （）=>import(' ')(プラスしないで{}直接returnを表します。)

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
const HelloWorld = ()=>import("@/components/HelloWorld")
export default new Router({
 routes: [
  {
   path: '/',
   name: 'HelloWorld',
   component:HelloWorld
  }
 ]
})

四、部品の怠惰なロード
 同じルートを怠惰にロードし、
1、もとのコンポーネントの書き方

<template>
 <div class="hello">
 <One-com></One-com>
 1111
 </div>
</template>

<script>
import One from './one'
export default {
 components:{
  "One-com":One
 },
 data () {
  return {
   msg: 'Welcome to Your Vue.js App'
  }
 }
}
</script>

2、const方法

<template>
 <div class="hello">
 <One-com></One-com>
 1111
 </div>
</template>

<script>
const One = ()=>import("./one");
export default {
 components:{
  "One-com":One
 },
 data () {
  return {
   msg: 'Welcome to Your Vue.js App'
  }
 }
}
</script>

3、非同期方法

<template>
 <div class="hello">
 <One-com></One-com>
 1111
 </div>
</template>

<script>
export default {
 components:{
  "One-com":resolve=>(['./one'],resolve)
 },
 data () {
  return {
   msg: 'Welcome to Your Vue.js App'
  }
 }
}
</script>

五、まとめ：
ルーティングとコンポーネントの一般的な2つの怠惰なロード方法：
1、vue非同期コンポーネントはルート怠惰負荷を実現する。component：resolve=>([' '，resolve])2、esが提出したimport（このような方式をおすすめします。）const HelloWorld = （）=>import(' ')
締め括りをつける
以上述べたのは小编が皆さんに绍介したvueルートの无精なロードと部品の无精なロードの方式を実现しました。皆さんに何かお聞きしたいことがあれば、メッセージをください。ここでも私たちのサイトを応援してくれてありがとうございます。
本文があなたのためになると思ったら、転載を歓迎します。出所を明記してください。ありがとうございます。