轻松上手使用 NProgress 进度条

简介: 轻松上手使用 NProgress 进度条

第一步:安装 NProgress

$ npm install --save nprogress

第二步:在main.js文件中导入 NProgress 包对应的JS和CSS

// 导入 NProgress 包对应的JS和CSS
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

第三步:在拦截器中使用 NProgress.start()和NProgress.done()

// axios请求拦截
// 在 request 拦截器中,展示进度条 NProgress.start()
axios.interceptors.request.use(config => {
  // console.log(config)
  NProgress.start()
  config.headers.Authorization = window.sessionStorage.getItem('token')
  // 在最后必须 return config
  return config
})
// 在 response 拦截器中,隐藏进度条 NProgress.done()
axios.interceptors.response.use(config => {
  // console.log(config)
  NProgress.done()
  // 在最后必须 return config
  return config
})
目录
相关文章
|
8月前
|
移动开发 前端开发 JavaScript
uView LoadingIcon 加载动画
uView LoadingIcon 加载动画
130 1
|
JavaScript 前端开发 程序员
前端开发:在vue中实现按钮倒计时功能
在vue中开发中,关于计时器的使用也是比较常见的知识点,如基于移动端的短信60秒倒计时按钮、阅读协议40秒等实际需求,很常见的需求也不复杂,主要是有些细节需要注意。那么本篇博文就来分享一下关于vue中实现倒计时功能的方法,方便查阅使用,如有问题请指正。
1492 0
|
25天前
|
JavaScript
简洁实用的jQuery进度条插件
这是一款简洁实用的jQuery进度条插件。该插件使用简单,通过在页面中放置指定的HTML代码,即可生成带动画效果的进度条。
|
8月前
|
前端开发
前端进度条组件NProgress
前端进度条组件NProgress
94 1
前端进度条组件NProgress
|
6月前
|
JavaScript 前端开发
vue 富文本编辑器 quill (含代码高亮、自定义字体、汉化、鼠标悬浮提示、组件封装等)
vue 富文本编辑器 quill (含代码高亮、自定义字体、汉化、鼠标悬浮提示、组件封装等)
369 0
|
8月前
|
移动开发 小程序 API
uniapp中uview组件库中丰富的LineProgress 线形进度条 的使用方法
uniapp中uview组件库中丰富的LineProgress 线形进度条 的使用方法
615 1
|
8月前
|
前端开发 API
uniapp中uview组件库丰富的LoadingIcon 加载动画
uniapp中uview组件库丰富的LoadingIcon 加载动画
275 0
|
移动开发 JavaScript HTML5
jQuery工具提示插件tooltip.js 使用教程
jQuery工具提示插件tooltip.js 使用教程
|
JavaScript 容器
【Vue3 插件篇】GSAP 动画库与 图片预览插件
【Vue3 插件篇】GSAP 动画库与 图片预览插件
1093 0

热门文章

最新文章

相关课程

更多
下一篇
开通oss服务