Vue使用NProgress

NProgress是页面跳转是出现在浏览器顶部的进度条

官网：http://ricostacruz.com/nprogress/

github：https://github.com/rstacruz/nprogress

 

 

安装 $ npm install --save nprogress

或者 $ yarn add nprogress

用法

NProgress.start() 显示进度条

NProgress.done() 隐藏进度条

使用

//导入 import NProgress from 'nprogress'

import 'nprogress/nprogress.css'

 

router.beforeEach((to, from, next) => { NProgress.start() next() }) router.afterEach(() => { NProgress.done() })

 

在App.vue中的style中增加： #nprogress .bar { background: red !important; //自定义颜色 }