一、vue组件的加载用v-if控制,组件关闭时销毁组件。
示例:
template
< div v-if=" dataObj. type=== 0" >
<!-- 任务详情 -->
< Drawer
:closable=" false"
:mask-closable=" isClosable"
v-model=" showDrawer"
width= "700"
:style="{ padding: 0}"
@on-close=" closeDrawer"
>
script
closeDrawer() {
this. showDrawer = false;
setTimeout(() => {
this. dataObj. type = null;
}, 500);
}
当type==0时,dom加载当前组件,当数据加载完毕时,showDrawer=true,侧边栏显示。
当侧边栏关闭时,type=null,组件从dom中删除,不占用资源。
二、页面加载时,公共组件延迟加载,可加快页面加载速度
例如:这个是任务详情的组件
< task-detal :dataObj=" dataObj" v-if=" showCompnent" @refresh=" renderData" ></ task-detal >
setTimeout(() => {
self. showCompnent = true;
}, 500);
页面加载完毕,组件延迟500秒加载。
三、每个页面请求数据
1、使用vuex存储路由,等于当前路由时,加载当前页面的数据。
存储方法 http://192.168.1.2:8989/webdoc/view/Pub40288182683a623e01683ab8b970000e.html?STATE=0&OPERATE=3
mounted() {
if( this. $store. state. link == '/board'){
var self = this;
this. getTaskBoard();
this. userInfo = this. $app. userInfo;
setTimeout(() => {
self. showCompnent = true;
}, 500);
}
}