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>

这种结构的好处是，页面初始化加载的时候只会加载需要的那个组件相关的内容，没切换到的那个组件不加载，使页面加载的速度加快。同时，每个组件加载过一次之后切换出再切回来不会重复加载相关内容和重复执行渲染