进度条nprogress

最新推荐文章于 2024-04-10 11:29:17 发布

cuiZero0

最新推荐文章于 2024-04-10 11:29:17 发布

阅读量123

点赞数

分类专栏： vue 文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/weixin_43991433/article/details/114364571

版权

vue 专栏收录该内容

11 篇文章

订阅专栏

本文介绍如何在Vue项目中集成NProgress组件实现页面加载进度显示效果。具体步骤包括：1. 下载NProgress包；2. 在main.js中导入NProgress；3. 配置axios请求和响应拦截器以控制进度条的开始和结束。

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

一、在下载vue的项目下下载此包
nprogress
在这里插入图片描述
二、导入包main.js文件下导入包

import Nprogress from 'nprogress'
import 'nprogress/nprogress.css'

在这里插入图片描述
三、在请求拦截器和相应拦截器里面

axios.interceptors.request.use(config => {
Nprogress.start()
  config.headers.Authorization = window.sessionStorage.getItem('token')
  return config
})
// 配置拦截器，在请求之前都必须要Authorization存放token字段
axios.interceptors.response.use(config => {
	Nprogress.done()
  return config
})