重要声明：本文章仅仅代表了作者个人对此观点的理解和表述。读者请查阅时持自己的意见进行讨论。

注意#，本文重点讲解的是：在整个应用里，不同的界面组件在用户实际跳转时才进行加载(从服务端下载js)并显示的功能实现。相当于实现的是各个页面懒加载。如果你在寻求的是：在某一个界面里，根据服务端返回的不同数据动态渲染控件到界面上的功能，请参考这篇文章:【Vue】动态添加组件的两种实现。

使用cli工具创建的vue项目一般来说，并没有为你自动配置vue-router路由支持，更加没有懒加载支持了。为了保证用户进入咱们的应用的速度，以及用户流量的重要性，我们十分有必要将应用中的各个界面进行懒加载处理。只有当用户确实需要进入某个界面的时候，才进行加载并显示。

一、Vue-Router 路由重现

为了更加便于理解，先放出来一个现存项目的已有路由列表。你不用担心是否明白其含义，基本上路由配置都是这样的：

let router = new Router({
    routes: [
        {path: '/login',      name: 'login',      component: require('@/pages/login')},
        {path: '/reg',        name: 'reg',        component: require('@/pages/reg')},
        {path: '/userinfo',   name: 'userinfo',   component: require('@/pages/userinfo')},
        {path: '/product',    name: 'product',    component: require('@/pages/product')},
        {path: '/payOk',      name: 'payOk',      component: require('@/pages/payOk')},
        {path: '/myorder',    name: 'myorder',    component: require('@/pages/gxbaodan')},
        {path: '/usercenter', name: 'usercenter', component: require('@/pages/usercenter')},
        {path: '/*',          name: 'notfound',   component: require('@/pages/notFound')}
    ]
});

可以看到，这里一共有7个界面以及一个空界面用于提示未找到。如果你程序不是很大，基本上就不需要做什么懒加载的需求，因为整体都只有很小的体积。但如果你的项目已经达到了几十个界面的规模，想必还是有必要进行懒加载支持的。

二、加入懒加载支持

1、第一种方法

Vue-Router提供了懒加载的配置方式，其配置方式非常简单，并且效果十分不错。上方的路由列表，咱们将其修改为懒加载的模式。目前它是直接require一个页面，如果我们为component赋值一个函数，即可实现懒加载模式：

// 默认的
component: require('@/pages/login')

// 将 component 赋值为函数的
component: function (resolve) {
    return require(["@/pages/login"], resolve);
}

// 以 es6 格式编写
component: resolve => require(["@/pages/login"], resolve)
// 可以精简一下
component: r => require(["@/pages/login"], r)

当你某个页面使用这种方式建立路由表后，这个页面就变成了按需加载的了。现在来看看把上面所有的界面都修改为懒加载模式的:

[
{path: '/login',     name: 'login',     component: r => require(['@/pages/login'],      r)},
{path: '/reg',       name: 'reg',       component: r => require(['@/pages/reg'],        r)},
{path: '/userinfo',  name: 'userinfo',  component: r => require(['@/pages/userinfo'],   r)},
{path: '/product',   name: 'product',   component: r => require(['@/pages/product'],    r)},
{path: '/payOk',     name: 'payOk',     component: r => require(['@/pages/payOk'],      r)},
{path: '/myorder',   name: 'myorder',   component: r => require(['@/pages/gxbaodan'],   r)},
{path: '/usercenter',name: 'usercenter',component: r => require(['@/pages/usercenter'], r)},
{path: '/*',         name: 'notfound',  component: r => require(['@/pages/notFound'],   r)}
]

这样，你的各个页面都是懒加载了。用户如果打开登录页，则只会下载登录页的逻辑，点击跳转到其他页面是，会自动加载并显示，你甚至不需要修改其他的任何代码！

2、第二种方法

得益于webpack的加持，我们可以简化上面的写法，其实在最终意义上，它们可以说都是在给component赋值一个工厂函数，而不是直接赋值为组件。本方法也是Vue-Router路由官方文档的解决方法：

// 默认的
component: require('@/pages/login')

// 直接使用import实现
component: () => import('@/pageslogin')

是的，相对来说，这个代码上直观并且更加简单了。实现的效果也和懒加载效果是一样的。现在来看看完全修改后的代码：

[
{path: '/login',     name: 'login',     component: () => import('@/pages/login')      },
{path: '/reg',       name: 'reg',       component: () => import('@/pages/reg')        },
{path: '/userinfo',  name: 'userinfo',  component: () => import('@/pages/userinfo')   },
{path: '/product',   name: 'product',   component: () => import('@/pages/product')    },
{path: '/payOk',     name: 'payOk',     component: () => import('@/pages/payOk'])     },
{path: '/myorder',   name: 'myorder',   component: () => import('@/pages/gxbaodan')   },
{path: '/usercenter',name: 'usercenter',component: () => import('@/pages/usercenter') },
{path: '/*',         name: 'notfound',  component: () => import('@/pages/notFound'],) }
]

三、总结

无论使用哪种方案，最终都可以达到懒加载的目的。由于 Webpack 的代码分割功能，使我们轻松实现路由组件的懒加载。只要不直接为 component 赋值为组件。将其赋值为一个加载工厂函数，即实现按需加载。