几种路由懒加载 实现方式

路由懒加载

两种方式： 1..Vue异步加载技术

  1：vue-router配置路由，使用vue的异步组件技术，可以实现懒加载，此时一个组件会生成一个js文件。
  2：component: resolve => require(['放入需要加载的路由地址'], resolve)
​

  {
     path: '/problem',
     name: 'problem',
     component: resolve => require(['../pages/home/problemList'], resolve)
   }
​

2.ES6推荐方式imprort ()

  1：直接将组件引入的方式，import是ES6的一个语法标准，如果需要浏览器兼容，需要转化成es5的语法。
  2：推荐使用这种方式，但是注意wepack的版本>2.4
  3：vue官方文档中使用的也是import实现路由懒加载
  4：上面声明导入，下面直接使用
​

import Vue from 'vue';
import Router from 'vue-router';
// 官网可知：下面没有指定webpackChunkName，每个组件打包成一个js文件。
const Foo = () => import('../components/Foo')
const Aoo = () => import('../components/Aoo')
// 下面2行代码，指定了相同的webpackChunkName，会合并打包成一个js文件。
// const Foo = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '../components/Foo')
// const Aoo = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '../components/Aoo')
export default new Router({
    routes: [
        {
            path: '/Foo',
            name: 'Foo',
            component: Foo
        },
        {
            path: '/Aoo',
            name: 'Aoo',
            component: Aoo
        }
    ]
})