Nprogress使用说明 Vue的使用方法 样式更改

首先需要下载对应的插件

yarn

	yarn add  nprogress  -D

npm

	npm i nprogress  -D

有红色波浪线的话 将鼠标放在上方 下载他的 @types/nprogress

	yarn add @types/nprogress -D  /  npm i  @types/nprogress -D

放在接口请求中使用

// axios 拦截器 
import axios from 'axios'
// 引入  nprogress   插件
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

const request = axios.create({
  timeout: 3000,
  timeoutErrorMessage: '请求超时',
})

request.interceptors.request.use(
  (config) => {
    // 开始进度条
    NProgress.start()
    return config
  },
  (err) => {
    return Promise.reject(err)
  }
)
request.interceptors.response.use(
  (res) => {
    // 关闭进度条
    NProgress.done()
    return res
  },
  (err) => {
    return Promise.reject(err)
  }
)

export default request

放在页面中使用

import Vue from 'vue'
import VueRouter from 'vue-router'
//引入nprogress  
import NProgress from 'nprogress'
​
Vue.use(VueRouter);
​
// 简单配置  进度条,可以不配置
NProgress.inc(0.2)
NProgress.configure({ easing: 'ease', speed: 500, showSpinner: false })
​
export const constRouter = [
    {
        path: '/login',
        component: () => import('@/views/login/Login'),
    },
    ...
]
​
const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes: constRouter
})

// 页面路由刚开始切换的时候
router.beforeEach(async (to,from,next) => {
    // 开启进度条
    NProgress.start();
})
​
// 页面路由切换完毕的时候
router.afterEach(() => {
    // 关闭进度条
    NProgress.done()
})
​
​
export default router

颜色的改变

如果想要更改颜色

// 自定义进度条颜色
#nprogress .bar {
  //           自己想要的颜色    
  background: #f811b2 !important; //自定义颜色
}

也可以改变粗细 加上 !important 即可
!important ： 作用是提高指定样式规则的应用优先权 ***

最后附上 nprogress 的官网 ： https://ricostacruz.com/nprogress/

npm nprogress 的官网 ： https://www.npmjs.com/package/nprogress