vue 在浏览器顶部显示进度条

主要借助于 NProgress 插件

​​NProgress​​​是页面跳转是出现在浏览器顶部的进度条
官网：​​​http://ricostacruz.com/nprogress/​​​ github：​​https://github.com/rstacruz/nprogress​​

 安装：

$ npm install --save nprogress

或者 $ yarn add nprogress

使用： 

在main.js中引入：

import NProgress from 'nprogress'; // Progress 进度条
import 'nprogress/nprogress.css'; // Progress 进度条样式

NProgress.start();
NProgress.done();

router.beforeEach((to, from, next) => {

   /*此处省略大量代码……*/

   const browserHeaderTitle = to.name;
    store.commit('SET_BROWSERHEADERTITLE', {
      browserHeaderTitle: browserHeaderTitle
    });
    if (whiteList.indexOf(to.path) !== -1) {
      next();
    } else {
      next('/login'); // 如果没有登录，跳转到智慧云气象门户
      NProgress.done();
    }
})

router.afterEach(() => {
  NProgress.done()
})