vue实现页面加载进度
实现页面加载进度的方法
在Vue中实现页面加载进度可以通过多种方式完成，以下介绍几种常见的方法：
使用NProgress库
NProgress是一个轻量级的进度条库，适合在Vue项目中快速实现加载进度效果。
安装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()
})自定义进度条组件
创建一个自定义的进度条组件，通过CSS和JavaScript控制其显示和隐藏。
<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)
}
}, 300)
},
finish() {
this.progress = 100
setTimeout(() => {
this.progress = 0
}, 500)
}
}
}
</script>
<style>
.progress-bar {
position: fixed;
top: 0;
left: 0;
height: 3px;
background-color: #42b983;
transition: width 0.4s;
z-index: 9999;
}
</style>使用Vue Router的导航守卫
结合Vue Router的导航守卫和自定义进度条组件实现加载进度。
// main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import ProgressBar from './components/ProgressBar.vue'
const progressBar = new Vue(ProgressBar).$mount()
document.body.appendChild(progressBar.$el)
router.beforeEach((to, from, next) => {
progressBar.start()
next()
})
router.afterEach(() => {
progressBar.finish()
})
new Vue({
router,
render: h => h(App)
}).$mount('#app')监听异步数据加载
对于需要加载异步数据的组件，可以在数据加载时显示进度条。
export default {
data() {
return {
isLoading: false
}
},
methods: {
async fetchData() {
this.isLoading = true
try {
const response = await api.getData()
// 处理数据
} finally {
this.isLoading = false
}
}
}
}使用CSS动画
纯CSS实现的进度条动画效果，适合简单场景。
@keyframes loading {
0% { width: 0; }
100% { width: 100%; }
}
.loading-bar {
position: fixed;
top: 0;
left: 0;
height: 3px;
background: linear-gradient(to right, #42b983, #35495e);
animation: loading 2s ease-in-out infinite;
z-index: 9999;
}以上方法可以根据项目需求选择使用，NProgress库提供了最完整的解决方案，而自定义组件则提供了更大的灵活性。
