关于在vue-spa中使用NProgress来显示在页面顶部的进度条笔记。

NProgress

Minimalist progress bar

Slim progress bars for Ajax’y applications. Inspired by Google, YouTube, and Medium.

安装+基本用法

// 下载安装
npm i nprogress -S

// 基本用法
NProgress.start();            // 开启进度条
NProgress.done();            // 关闭进度条

常用配置

递增：要递增进度条，只需使用.inc()。这使它以随机量递增。这将永远不会达到100％：将其用于每次图像加载（或类似加载）。

NProgress.inc();

如果要增加特定值，可以将其作为参数传递：

NProgress.inc(0.2);     //这将获取当前状态值并添加0.2直到状态为0.994

PS: 我的理解：即每次增加一点点，但永远不会到百分之百

配置项：

easing 和 speed

使用缓动（CSS缓动字符串）和速度（以毫秒为单位）调整动画设置。（默认：ease和200）

NProgress.configure({ easing: 'ease', speed: 500 });

showSpinner

通过将加载微调器设置为false来关闭它。（默认值：true）

NProgress.configure({ showSpinner: false });

在vue中的使用

引入Nprogress默认样式

在~/main.js中引入Nprogress默认样式

// 引入进度条样式
import 'nprogress/nprogress.css'

它默认显示为蓝色进度条，如果你想自定义进度条颜色，可在全局css中或在app.vue下写入自己自定义的css样式；

<style>
// 自定义进度条颜色
 #nprogress .bar {
     background: #F811B2 !important; //自定义颜色
  }
</style>

在页面切换中使用

在~/router/index.js 【路由配置】文件中:

import Vue from 'vue'
import VueRouter from 'vue-router'
//引入nprogress 进度条插件
import NProgress from 'nprogress'

Vue.use(VueRouter);

// 简单配置  进度条,可以不配置：在axios中我们不再做配置，以用来区分。
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

在接口请求中使用

在~/api/index.js 【axios请求配置】文件中:

import axios from 'axios'
//引入nprogress 进度条插件
import NProgress from 'nprogress'

// 创建axios实例
const service = axios.create({
    baseURL: process.env.VUE_APP_BASE_API, //URL地址   环境变量文件
    timeout: 5000 ,//超时
})

// 请求拦截器
service.interceptors.request.use(
    config => {
        // 开启进度条
        NProgress.start();
        return config
    },
    error => {
        return Promise.reject(error)
    }
)

// 响应拦截器
service.interceptors.response.use(
    response =>{
        // 关闭进度条
        NProgress.done()
        return Promise.reject(response)
    },
    error => {
        // 关闭进度条
        NProgress.done()
        return Promise.reject(error)
    }
)

export default service;

参考以下资料：

​ GitHub地址: https://github.com/rstacruz/nprogress

欢迎更正；联系邮箱： zhanghaoran.ren@qq.com

至此完结！！