First define the component asynchronous loading
define(['jquery','vue'],function($,Vue){
('comp1',function(resolve){
require(['component/comp1'],resolve);
});
('comp2',function(resolve){
require(['component/comp2'],resolve);
});
var b = new Vue({
el:"#app",
data:{
currentView:'comp1'
},
methods:{
toggleView:function(){
();
= =='comp1'?'comp2':'comp1';
}
}
});
})
For details, please refer to the asynchronous components and dynamic components of vuejs. Then the code inside html
<div >
<keep-alive><!-- usekeep-aliveThe components that are dynamically cut out can be saved in memory（Just hide it and can't see it），But after coming back, the previous status and data will continue -->
<component v-bind:is="currentView"></component>
</keep-alive>
<button type="button" v-on:click="toggleView">Switchview</button>
</div>
The advantage of this structure is that when the page is initialized, it will only load the content related to the required component, and the component that has not been switched to will not be loaded, which will speed up the page loading speed. At the same time, after each component is loaded once, switch out and switch back, it will not repeatedly load relevant content and perform rendering repeatedly
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.