VUE动态加载包含js的HTML,详解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里面的代码

切换view

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。