Vue3 使用 NProgress 进度条

使用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

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
nii的头像nii
上一篇 2022-08-19
下一篇 2022-10-14

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

联系我们

邮件:83390286[AT]QQ.COM

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信