一、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);
}
}