Vue路由的两种加载方式

Vue的路由加载有两种方式：非懒加载和懒加载（按需加载）

非懒加载

webpack在打包的时候会把整个路由打包成一个js文件，如果页面一多，会导致这个文件非常大，加载缓慢

格式：

import Hello from '@/components/Hello'

const routes = new Router({
	path: '/hello',
	name:'hello'
    component: Hello
	})

懒加载（按需加载）

按需加载时，一个组件生成一个js文件。可以使用按需加载来减少首屏加载的时间，避免白屏、等待时间过长等问题。

格式：

方式一、vue异步组件技术

const routes = [
    {
        path:'/home',
        name: 'home',
        component: (resolve) => { require('../components/Home.vue', resolve) }     
    },
    {
        path:'/about',
        name: 'about',
        component: (resolve) => { require('../components/About.vue', resolve) }     
    }
]
 
export default new VueRouter({
    routes
})

方式二、结合es6的动态import方式（目前官方推荐）

const routes = [
    {
        path:'/home',
        name: 'home',
        component: () => import('../components/Home.vue')
    },
    {
        path:'./about',
        name: 'about',
        component: () => import('../components/About.vue')
    }
]
 
export default new VueRouter({
    routes
})