异步组件，顾名思义，按需加载组件。
在vue的文档中，除了异步组件的高级使用方法外，介绍了三个异步组件的解决方案
在介绍异步组件的解决方案之前，先说明一下组件的注册：
1、全局组件注册：
通过import Vue from 'vue' 在环境中引入Vue对象 ，并调用其component方法注册全局组件
Vue.component('async-webpack-component-name',function(resolve){
require(['./my-async-component'], resolve)
})
2、局部注册组件
在vue对象的components中注册局部组件
new Vue({
// ...
components: {
'my-component':()=>import('./my-async-component')
}
})
组件注册说明完毕，下面介绍异步组件的具体实现方式：
1、借助于require与webpack的代码分隔功能来实现
export default{
data: () => ({
key:'',
value:'test'
}),
components: {
'zz': (resolve) => {
// 这个特殊的 require 语法告诉 webpack，而这边需要打包的vue组件的目录是通过ajax拿到
// 自动将编译后的代码分割成不同的块，
// 这些块将通过 Ajax 请求自动下载。（这是官方说明，实际上代码中的异步组件依然被webpack打包成一个js文件，需要在html中引入才能 使用）
require(['./'+ window.vue.key],resolve) //需要注意的是，目录必须是字符串，且不能完全由变量代替
}
},
created() {
window.vue=this
},
methods: {
funConsole(word) {
console.log(word)
}
},
beforeRouteEnter(to,from,next) {
next(vm => {
vm.$http.post('url').then((response) => {
vm.key='HH.vue'
},(response) => {
})
})
}
}
2、使用 Webpack 2 + ES2015 的语法返回一个Promise resolve 函数
export default{
data: () => ({
key:'',
value:'test'
}),
components: {
'zzz': () =>import('./'+ window.vue.key) //此处同上
},
created() {
window.vue=this
},
methods: {
funConsole(word) {
console.log(word)
}
},
beforeRouteEnter(to,from,next) {
next(vm => {
vm.$http.get('url').then((response) => {
vm.key='HH.vue'
},(response) => {
})
})
}
}
3、动态获取服务端的组件
export default{
data: () => ({
key:'',
value:'test'
}),
components: {
'z':function(resolve,reject) {
window.vue.$http.get('/static/img/HH.js',).then((response) => {
let str = response.bodyText.replace('export default ','')
let obj =eval("("+ str +")")
resolve(obj)
},(response) => {
})
}
},
created() {
window.vue=this
},
methods: {
funConsole(word) {
console.log(word)
}
},
beforeRouteEnter(to,from,next) {
next(vm => {
vm.$http.get('url').then((response) => {
vm.key='HH.vue'
},(response) => {
})
})
}
}
1、2方法编译输出后，会多生成一个异步组件的Js文件，需要在html文件中引入，才能实现异步组件
而第三种无需在html中引入，通过后端传入js文件url即可实现真真的异步组件
（水平有限，如有认识不足之处还望指出，谢谢）
网友评论