如何为vue项目添加进度条

原创于 2020-04-30 15:23:27 发布 · 658 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

本文介绍如何在Vue项目中添加进度条功能，主要利用NProgress插件。首先，从ElementUI库获取并安装该依赖。然后，在main.js文件中引入并注册NProgress，实现页面加载时的进度条效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用到的插件为NProgress

下载NProgress插件（在elementui中直接找到依赖，点击下载依赖）
在main.js中引入

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

并且注册

// 在request拦截器中，展示进度条 NProgress.start()
axios.interceptors.request.use(config => {
  NProgress.start()
  config.headers.Authorization = window.sessionStorage.getItem('token')
  return config
})
// 在response拦截器中，隐藏进度条NProgress.done()
axios.interceptors.response.use(config => {
  NProgress.done()
  return config
})