VUE3工程发布后的运行过程为先加载html面,再通过html页中的js加载单页面js来渲染页面并显示。
根据这个加载过程,实现页面加载中的原理是预先在html中显示加载中,再单页面数据加载完成在mounted时隐藏加载中,即实现想要的效果。
在public/index.html中添加加载中图层,对应的css自己根据需要设计即可。
<div id="dvtop-app-loading">
<div>
<div class="dvtop-loader">
<div class="dvtop-loading"></div>
</div>
<div class="text">页面加载中</div>
</div>
</div>
在src/App.vue隐藏加载中。
mounted(){
this.hideAppLoading();
},
methods: {
hideAppLoading: function () {
//删除加载中的图层
const loadingLayer: any = document.getElementById("dvtop-app-loading");
loadingLayer.style.opacity = "0.0";
setTimeout(() => {
document.body.removeChild( loadingLayer);
}, 500); //