vue项目未加载完成前显示loading样式

这篇文章距离上次修改已过229天，其中的内容可能已经有所变动。

在Vue项目中，可以通过监听路由的切换来实现在项目未加载完成前显示loading样式。以下是一个简单的实现方法：

在项目的入口文件（通常是main.js）中，监听路由的loaded事件。
在路由对象上监听loaded事件，当事件触发时，表示项目加载完成，可以隐藏loading样式。

示例代码：

// main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'

// 引入Loading组件
import LoadingComponent from './components/Loading.vue'

Vue.component('loading-component', LoadingComponent)

// 创建Vue实例，并挂载
new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

// 监听路由加载事件
router.onReady(() => {
  // 路由加载完成，可以隐藏Loading组件
  document.body.classList.remove('loading');
}, () => {
  // 路由加载失败的回调（可选）
});

// 在App.vue中添加Loading组件
<template>
  <div id="app" class="loading">
    <loading-component></loading-component>
    <!-- 页面其他内容 -->
  </div>
</template>

// 在Loading.vue中定义Loading组件的样式
<template>
  <div class="loading-overlay">
    <!-- Loading样式，例如旋转图标等 -->
  </div>
</template>

<style>
.loading-overlay {
  /* Loading样式 */
}

.loading {
  overflow: hidden; /* 阻止滚动 */
}
</style>

在上述代码中，router.onReady() 方法用于监听路由是否已经准备完毕。当路由加载完成时，它会触发一个回调函数，在这个回调函数中可以移除加载状态的class，从而隐藏Loading组件。

请注意，这只是一个基础示例，具体的Loading组件样式和逻辑需要根据项目需求进行设计。

vue项目未加载完成前显示loading样式

评论已关闭

推荐阅读