本文共 1457 字，大约阅读时间需要 4 分钟。

vue 路由懒加载 resolve vue-router配置

使用方法1:  

这是异步加载代码的旧写法.

使用方法2：

你可以改写成以下比较容易理解的写法.

component: () => import('@/page/index')

懒加载

router/index.js

import Vue from 'vue'import Router from 'vue-router'Vue.use(Router) export default new Router({  mode:'history',  routes: [    {      path:'/',      redirect:'/index'    },    {      path: '/about',      name: 'About',      component:resolve => require(['@/pages/About'],resolve)    },    {      path: '/index',      name: 'Index',      component:resolve => require(['@/pages/Index'],resolve)    },    {      path: '/product',      name: 'Product',      component:resolve => require(['@/pages/Product'],resolve)    }  ]})

非懒加载

router/index.js

import Vue from 'vue'import Router from 'vue-router'import About from '@/pages/About'import Index from '@/pages/Index'import Product from '@/pages/Product'Vue.use(Router) export default new Router({  mode:'history',  routes: [    {      path:'/',      redirect:'/index'    },    {      path: '/about',      name: 'About',      component:About    },    {      path: '/index',      name: 'Index',      component:Index    },    {      path: '/product',      name: 'Product',      component:Product    }  ]})

如果用import引入的话，当项目打包时路由里的所有component都会打包在一个js中，造成进入首页时，需要加载的内容过多，时间相对比较长。当你用require这种方式引入的时候，会将你的component分别打包成不同的js，加载的时候也是按需加载，只用访问这个路由网址时才会加载这个js。

你可以打包的时候看看目录结构就明白了，生成了多个js文件， 如下图：

只生成了一个Vendor.js：

转载地址：http://vcyws.baihongyu.com/