路由懒加载

达到按需加载的效果。

不使用懒加载

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 
        } 
    ] 
})

vue异步组件实现

resolve=>(require(["路径"],resolve))

import Vue from 'vue' 
import Router from 'vue-router' 

Vue.use(Router) 

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

使用import()实现

()=>import("路径")

import Vue from 'vue' 
import Router from 'vue-router' 

Vue.use(Router) 

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

组件懒加载

达到按需加载的效果。

不使用懒加载

<template> 
    <div class="hello"> 
        <DomeTest></DomeTest> 
    </div> 
</template> 

<script>
//直接引入组件
import DomeTest from './dometest' 

export default { 
    components:{ 
        DomeTest:DomeTest 
    }, 
    data () { 
        return { 
        } 
    } 
} 
</script>

vue异步组件实现

resolve=>(require(["路径"],resolve))

<template> 
    <div class="hello"> 
        <DomeTest></DomeTest> 
    </div> 
</template> 

<script>

export default { 
    components:{ 
        DomeTest:resolve=>(['./dometest'],resolve)
    }, 
    data () { 
        return { 
        } 
    } 
} 
</script>

使用import()实现

()=>import("路径")

<template> 
    <div class="hello"> 
        <DomeTest></DomeTest> 
    </div> 
</template> 

<script>

export default { 
    components:{ 
        DomeTest:()=>import("./dometest");
    }, 
    data () { 
        return { 
        } 
    } 
} 
</script>