非懒加载
import List from '@/components/list.vue'
const router = new VueRouter({routes: [{ path: '/list', component: List }]
})
方案一(常用)
const List = () => import('@/components/list.vue')
const router = new VueRouter({routes: [{ path: '/list', component: List }]
})
方案二
const router = new Router({routes: [{path: '/list',component: (resolve) => {// 这里是你的模块 不用import去引入了require(['@/components/list'], resolve)}}]
})
方案三
使用webpack的require.ensure技术,也可以实现按需加载。 这种情况下,多个路由指定相同的chunkName,会合并打包成一个js文件。
// r就是resolve
const List = r => require.ensure([], () => r(require('@/components/list')), 'list');
// 路由也是正常的写法 这种是官方推荐的写的 按模块划分懒加载
const router = new Router({routes: [{path: '/list',component: List,name: 'list'}]
}))