详解VueJs异步动态加载块
更新时间：2017年03月09日 10:31:04 作者：daelly
本篇文章主要介绍了VueJs异步动态加载块，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
首先定义组件为异步加载
define(['jquery','vue'],function($,Vue){
Vue.component('comp1',function(resolve){
require(['component/comp1'],resolve);
});
Vue.component('comp2',function(resolve){
require(['component/comp2'],resolve);
});
var b = new Vue({
el:"#app",
data:{
currentView:'comp1'
},
methods:{
toggleView:function(){
console.log(this.currentView);
this.currentView = this.currentView=='comp1'?'comp2':'comp1';
}
}
});
})
具体可以参考vuejs的异步组件和动态组件。然后是html里面的代码
<div id="app">
<keep-alive><!-- 使用keep-alive可以让动态被切出去的组件继续保存在内存中（只是隐藏看不到），却回来之后会继续之前的状态和数据 -->
<component v-bind:is="currentView"></component>
</keep-alive>
<button type="button" v-on:click="toggleView">切换view</button>
</div>
这种结构的好处是，页面初始化加载的时候只会加载需要的那个组件相关的内容，没切换到的那个组件不加载，使页面加载的速度加快。同时，每个组件加载过一次之后切换出再切回来不会重复加载相关内容和重复执行渲染
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章
这篇文章主要介绍了element-ui封装一个Table模板组件的示例，帮助大家更好的理解和学习vue框架的使用，感兴趣的朋友可以了解下2021-01-01
这篇文章主要为大家详细介绍了Vue+Element实现表格单元格编辑，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
这篇文章主要给大家介绍了关于Vue+element-ui添加自定义右键菜单的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-12-12
这篇文章主要介绍了关于应用UI组件的移动端适配方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要介绍了vue+elementUI显示表格指定列合计数据方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要介绍了基于element-UI input等组件宽度修改方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
这篇文章主要介绍了vuecli项目构建SSR服务端渲染的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-10-10
本文主要介绍了elementplus实现多级表格(最后一级展示图片)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-05-05
这篇文章主要介绍了Vue 中文本内容超出规定行数后展开收起的处理的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
这篇文章主要介绍了Vue移动端下拉刷新组件的使用教程，每一次我在使用vant组件库里面list组件和下拉刷新连在一起用的时候都会出现下拉刷新和列表下滑局部滚动的冲突，这就很难受，这篇文章将解决它2023-04-04
最新评论