一、ensure参数说明？
require.ensure(dependencies: String[], callback: function(require), chunkName: String)
说明: require.ensure在需要的时候才下载依赖的模块，当参数指定的模块都下载下来了（下载下来的模块还没执行），便执行参数指定的回调函数。require.ensure会创建一个chunk，且可以指定该chunk的名称，如果这个chunk名已经存在了，则将本次依赖的模块合并到已经存在的chunk中，最后这个chunk在webpack构建的时候会单独生成一个文件。
语法: require.ensure(dependencies: String[], callback: function([require]), [chunkName: String])
dependencies: 依赖的模块数组
callback: 回调函数，该函数调用时会传一个require参数
chunkName: 模块名，用于构建时生成文件时命名使用
例：
require.ensure([], function() {
var baidumap = require('../assets/demo.js') //demo.js放在我们当前目录下
},"clickme")
注意点：requi.ensure的模块只会被下载下来，不会被执行，只有在回调函数使用require(模块名)后，这个模块才会被执行。
上面说了那么多，下面直接来干货。
二、手写一个简单点击事件
（1）首先创建vue-cli脚手架
安装完成后在浏览器访问：http://localhost:8080如下图所示即安装成功
（2）在components目录中创建index.vue、在assets创建demo.js和在根目录下创建main.js
Index.js代码：
<template>
<div>
<div @click="onClick1">点我1</div>
</div>
</template>
<script>
export default {
name: 'Index',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
methods:{
onClick1:function(){
console.log(1);
require.ensure([], function() {
var baidumap = require('../assets/demo.js') //demo.js放在我们当前目录下
},"clickme")
}
}
}
</script>
demo.js代码：
console.log("121232");
main.js
import Vue from 'vue'
import router from './router'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router: router,
render: h => h('router-view'),
// template: '<App/>'
})
别忘记在配置文件webpack.base.conf.js中加
chunkFilename: "[name].chunk.js",
刷新浏览器如下图所示
点击：点我1后多个文件js
三、开发项目时多个路由异步加载如下图所示
index.js
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import App from '../App'
Vue.use(Router)
const Index = r => require.ensure([], () => r(require('@/components/index')), 'index')
const Page1 = r => require.ensure([], () => r(require('@/components/page1')), 'Page1')
const Page2 = r => require.ensure([], () => r(require('@/components/page2')), 'Page2')
const User = r => require.ensure([], () => r(require('@/components/user')), 'User')
const Demovuex = r => require.ensure([], () => r(require('@/components/uemovuex')), 'Demovuex')
const Demovuex1 = r => require.ensure([], () => r(require('@/components/uemovuex1')), 'Demovuex1')
export default new Router({
routes: [
{
path: '/',
name: 'App',
component: App,
children: [
{ path: 'index', name:'index', component: Index },
{ path: 'page1', name:'page1', component: Page1 },
{ path: 'page2/:id', name:'page2', component: Page2 }
]
},{
path: '/user/:id/ss',
name: 'user',
component: User
},{
path: '/demovuex',
name: 'demovuex',
component: Demovuex
},{
path: '/demovuex1',
name: 'demovuex1',
component: Demovuex1
}
]
})
