在Vue中使用NProgress监控页面滚动进度

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

博主想用Vue实现全局监控页面滚动条的进度。功能与NProgress相似，因此直接使用当前插件来进行实现。

效果：

一、安装

npm install --save nprogress
或
yarn add nprogress

二、使用

1. 作为加载进度条

在Vue入口文件 main.js 中引入 nprogress

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import NProgress from 'nprogress' //引入 nprogress 插件
import 'nprogress/nprogress.css' // 引入基础样式

切换路由时进行加载（也是在main.js中）

//当路由进入前
router.beforeEach((to