最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
详解VueJs异步动态加载块
时间：2017-06-13 编辑：简简单单 来源：一聚教程网
首先定义组件为异步加载
| 代码如下 | 复制代码 |
define(['jquery','vue'],function($,Vue){ Vue.component('comp1',function(resolve){ require(['component/comp1'],resolve); }); Vue.component('comp2',function(resolve){ require(['component/comp2'],resolve); }); varb =newVue({ el:"#app", data:{ currentView:'comp1' }, methods:{ toggleView:function(){ console.log(this.currentView); this.currentView =this.currentView=='comp1'?'comp2':'comp1'; } } }); }) | |
具体可以参考vuejs的异步组件和动态组件。然后是html里面的代码
| 代码如下 | 复制代码 |
| |
这种结构的好处是，页面初始化加载的时候只会加载需要的那个组件相关的内容，没切换到的那个组件不加载，使页面加载的速度加快。同时，每个组件加载过一次之后切换出再切回来不会重复加载相关内容和重复执行渲染
相关文章
- JS异步加载的三种实现方式 07-03
- 详解基于angular路由的requireJs按需加载js 02-09
- js模块加载seajs框架的教程 10-29
- 深入分析seajs加载过程 04-04
- js延时加载特效代码 09-14
- js中判断iframe是否加载完成 02-20