vue中使用NProgress

vue中使用NProgress

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

1.安装

$ npm install --save nprogress 或者$ yarn add nprogress

//用法

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

2、使用

router.js

//导入

import NProgress from 'nprogress';

import 'nprogress/nprogress.css';

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

NProgress.start();

next();

})

router.afterEach(() => {

NProgress.done();

})

3、Vue中使用NProgress 修改颜色

在App.vue的style中增加:

#nprogress .bar {

background: red !important; //自定义颜色

}