使用Vue切换界面，是不显示进度的，如果网络较差，客户不知道是否已经点了链接，显示进度条可以增加客户体验。
项目地址
https://github.com/rstacruz/nprogress
- 1. 如何安装
在项目目录下执行一下命令安装nprogress
$ npm install --save nprogress- 2. 如何使用
只需调用start（）和done（）来控制进度条。
NProgress.start();
NProgress.done();- 3. 如何在Vue项目使用
点击链接(RouterLink）进度条都会显示
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import './assets/main.css'
# 第一步： 引入nprogress js和css
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
const app = createApp(App)
app.use(router)
# 第二步：router 绑定开始和结束
router.beforeEach((to,from,next) => {
NProgress.start()
next()
})
# 加载完成 ， 结束时调用 done
router.afterEach(() => {
NProgress.done()
})
app.mount('#app')- 4. 如果项目使用了 Axios，需要增加拦截器，每次触发请求都会显示进度条
//发起请求
axios.interceptors.request.use(function (config) {
NProgress.start();
return config;
}, function (error) {
// 请求错误也结束进度条
NProgress.done();
console.error(error)
return Promise.reject(error);
});
// 响应
axios.interceptors.response.use(function (response) {
NProgress.done();
return response;
}, function (error) {
// 请求错误也结束进度条
NProgress.done();
console.error(error)
return Promise.reject(error);
});- 5. jQuery 使用方法
# 开始
$( document ).ajaxStart(function() {
NProgress.start();
});
# 结束
$( document ).ajaxStop(function() {
NProgress.done();
});版权声明：本文为NII.CN的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://nii.cn/4139.html 发布者：nii
微信扫一扫 
支付宝扫一扫 
![[Vue warn]: Component inside <Transition> renders non-element root node that cannot be animated.](https://nii.cn/wp-content/uploads/2022/07/lazy-480x300.png)
