VUE 项目页面顶部的进度条功能

最新推荐文章于 2024-05-21 08:55:27 发布

brightbrightbright

最新推荐文章于 2024-05-21 08:55:27 发布

阅读量561

点赞数 1

分类专栏：日常笔记文章标签： vue

本文链接：https://blog.csdn.net/Dodoboom/article/details/107564961

版权

日常笔记专栏收录该内容

1 篇文章 0 订阅

订阅专栏

NProgress 插件使用

GitHub：https://github.com/rstacruz/nprogress

安装：命令行安装方式

$ npm install --save nprogress

或者，在vue可视化窗口，安装项目依赖

使用

①在vue脚手架的入口文件main.js中导入NProgress的 JS文件和样式文件

import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

②使用axios.interceptors请求拦截和返回拦截器，在请求拦截器中开启进度条，在返回拦截器中关闭进度条

// 进度条开启代码
NProgress.start()
// 进度条关闭代码
NProgress.done()

// 在 request 拦截器中，展示进度条 NProgress.start()
axios.interceptors.request.use(config => {
        NProgress.start()
        return config
})
// 在 response 拦截器中，关闭进度条 NProgress.done()
axios.interceptors.response.use(config => {
    NProgress.done()
    return config
})