实现vue-router 路由懒加载

相比React，Vue实现组件的懒加载还是比较简单的，以下是官方文档的说明

实现vue-router 路由懒加载 实现vue-router 路由懒加载

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
export default new VueRouter({
 routes: [
 {
 path: '/',
 name: 'Navigator',
 component: () => import(/* webpackChunkName: "navigator" */ './../components/Navigator')
 },
 {
 path: '/tucao',
 name: 'Tucao',
 component: () => import(/* webpackChunkName: "tucao" */ './../components/Tucao')
 }
 ]

以上是按照官方文档写的懒加载代码，但是发现chunk命名并没生效

，再去仔细看看官方文档说明

“结合 Vue 的异步组件和 Webpack 的代码分割功能，轻松实现路由组件的懒加载”

其实还差一个webpack配置，就是webpack output需要加个chunkFilename

chunkFilename: '[name].js'

本次给大家推荐一个免费的学习群，里面概括移动应用网站开发，css，html，webpack，vue node angular以及面试资源等。
对web开发技术感兴趣的同学，欢迎加入Q群：864305860，不管你是小白还是大牛我都欢迎，还有大牛整理的一套高效率学习路线和教程与您免费分享，同时每天更新视频资料。
最后，祝大家早日学有所成，拿到满意offer，快速升职加薪，走上人生巅峰。