详解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>
这种结构的好处是，页面初始化加载的时候只会加载需要的那个组件相关的内容，没切换到的那个组件不加载，使页面加载的速度加快。同时，每个组件加载过一次之后切换出再切回来不会重复加载相关内容和重复执行渲染
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章
这篇文章主要介绍了Vue组件的层级关系，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-08-08
Vue-router是Vue的核心组件，主要是作为Vue的路由管理器，Vue-router默认hash模式，本文讲给大家详细分析Vue路由Hash模式，文中有相关的代码示例供大家参考，感兴趣的同学可以借鉴一下2023-06-06
这篇文章主要为大家总结了vue2.0开发实践的疑难,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
这篇文章主要为大家详细介绍了Vue.js创建Calendar日历效果的过程，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-11-11
这篇文章主要介绍了通过vue如何设置header,每个项目都有头部但是内容不一样;这种情况我们可以考虑在app.vue中创建公共头部，那么怎么配置公共头部header，下面小编通过实例代码详细讲解，需要的朋友可以参考下2023-02-02
Element-UI表格嵌入popover遇到的问题及解决方案
在表格中我们通常需要在每一行的一些单元格中显示popover,这篇文章主要给大家介绍了关于Element-UI表格嵌入popover遇到的问题及解决方案,需要的朋友可以参考下2023-11-11
这篇文章主要给大家介绍了关于Vue中引入svg图标的两种方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-01-01
本篇文章主要介绍了Vue响应式原理详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-04-04
element-ui中导航组件menu的一个属性:default-active说明
这篇文章主要介绍了element-ui中导航组件menu的一个属性:default-active说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
今天小编就为大家分享一篇对vue中v-on绑定自定事件的实例讲解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
最新评论