vue+webpack实现异步加载三种用法示例详解

前端之家收集整理的这篇文章主要介绍了vue+webpack实现异步加载三种用法示例详解前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

@H_403_0@1.第一例


<div class="jb51code">
<pre class="brush:js;">
const Home = resolve => {
import("@/components/home/home.vue").then( module => {
resolve(module)
}
}

@H_403_0@注:(上面import的时候可以不写后缀)

Meta: { requireAuth: true,// 添加属性可以判断出该页面是否需要登录显示 },}]
@H_403_0@2.第二例

{ require(['../components/home/home'],resolve) // 省去了在上面去import引入 } } ] })
@H_403_0@3.第三例,这也是推荐的一种

require.ensure([],() => r(require('../components/home/home')),'home'); const router = new Router({ routes: [ { path: '/home/home',name: 'home',} ] })
@H_403_0@

下面给大家介绍下vue+webpack实现异步组件加载的代码,具体代码如下所示:

@H_403_0@HTML

获取child组件,再渲染div内容
@H_403_0@JS

@H_403_0@注意:加载异步组件的时候,组件名后边的.vue不要忽略。这个例子应该比较直观了。点击按钮之后改变了变量show的布尔值为真,由于child.vue是异步组件,所以会先ajax获取组件然后渲染。

@H_403_0@

总结

@H_403_0@以上所述是小编给大家介绍的vue+webpack实现异步加载三种用法。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

猜你在找的Vue相关文章