Vue项目中使用NProgress.js

NProgress.js

A nanoscopic progress bar. Featuring realistic trickle animations to convince your users that something is happening!

NProgress.js官网：NProgress.js
NProgress.js在npm官网地址：nprogress

NProgress.js安装

npm install --save nprogress

NProgress使用

在JS中写如下代码：

• 显示进度条（shows the progress bar）：

  NProgress.start()
  

• 设置进度条加载的百分比（sets a percentage）

   NProgress.set(0.4)
  

• 进度条增加一点点（increments by a little）

   NProgress.inc()
  

• 进度条加载完成（completes the progress）

    NProgress.done()
  

NProgress在Vue单页应用中全局使用

在router.js中写如下代码：

// 引入NProgress进度条
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

// 全局使用NProgress
router.beforeEach((to,from,next)=>{
  NProgress.start()
  next()
})
router.afterEach(()=>{
  NProgress.done()
})

完整的导航解析流程：

1. 导航被触发。
2. 在失活的组件里调用 beforeRouteLeave 守卫。
3. 调用全局的beforeEach 守卫。
4. 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
5. 在路由配置里调用 beforeEnter。
6. 解析异步路由组件。
7. 在被激活的组件里调用 beforeRouteEnter。
8. 调用全局的 beforeResolve守卫 (2.5+)。
9. 导航被确认。
10. 调用全局的 afterEach钩子。
11. 触发 DOM 更新。
12. 用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。

参考链接：导航守卫

其中前置守卫：

to: Route: 即将要进入的目标 路由对象
from: Route: 当前导航正要离开的路由
next: Function: 一定要调用该方法来 resolve 这个钩子。

修改NProgress进度条的颜色

创建一个css文件，写入相关样式，然后在使用的地方进行引入即可！

#nprogress .bar {
    background: red !important;
}

比如在全局引用：

Vue项目router文件夹中index.js文件中引入样式文件

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
import  '../assets/css/nprogress.css'