vue实现页面加载进度
Vue 实现页面加载进度的方法
使用 NProgress 库
安装 NProgress 库：
npm install nprogress在 Vue 项目中引入并使用：
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
// 在路由守卫中调用
router.beforeEach((to, from, next) => {
NProgress.start()
next()
})
router.afterEach(() => {
NProgress.done()
})自定义进度条组件
创建一个全局进度条组件：
<template>
<div class="progress-bar" :style="{ width: progress + '%' }"></div>
</template>
<script>
export default {
data() {
return {
progress: 0
}
},
methods: {
start() {
this.progress = 0
const interval = setInterval(() => {
this.progress += 10
if (this.progress >= 100) {
clearInterval(interval)
}
}, 200)
},
finish() {
this.progress = 100
setTimeout(() => {
this.progress = 0
}, 500)
}
}
}
</script>
<style>
.progress-bar {
height: 3px;
background-color: #42b983;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
transition: width 0.3s;
}
</style>使用 Vue Router 的导航守卫
结合路由变化显示加载状态：
const router = new VueRouter({
routes
})
router.beforeEach((to, from, next) => {
// 显示加载状态
store.commit('setLoading', true)
next()
})
router.afterEach(() => {
// 隐藏加载状态
setTimeout(() => {
store.commit('setLoading', false)
}, 500)
})监听页面资源加载
通过 window.onload 事件检测页面完全加载：
mounted() {
window.onload = () => {
// 页面完全加载后执行的操作
this.loading = false
}
}使用 Axios 拦截器
为 AJAX 请求添加加载状态：
axios.interceptors.request.use(config => {
// 请求开始时显示加载状态
store.commit('setLoading', true)
return config
})
axios.interceptors.response.use(response => {
// 请求完成后隐藏加载状态
store.commit('setLoading', false)
return response
}, error => {
store.commit('setLoading', false)
return Promise.reject(error)
})每种方法适用于不同场景，NProgress 提供开箱即用的解决方案，自定义组件更灵活，路由守卫适合SPA应用，资源监听适合传统页面，拦截器则适合AJAX密集型应用。
