Vue项目中给路由跳转加上进度条nprogress

1，安装
　　

npm install --save nprogress

2、在main.js文件中引入

　　

import NProgress from ‘nprogress’;
　　import ‘nprogress/nprogress.css’;

　　//在页面跳转使用
　　router.beforeEach((to,from,next) => {
　　　　//开始进度条
　　　　NProgress.start();
　　　　// 继续路由
　　　　next();
　　});
　　router.afterEach(transition => {
　　　　//结束进度条
　　　　NProgress.done();
　　});

3、个性化配置

　

　NProgress.configure({

　　　　easing: 'ease', // 动画方式

　　　　speed: 500, // 递增进度条的速度

　　　　showSpinner: false, // 是否显示加载

 　　　 trickleSpeed: 200, // 自动递增间隔

　　　　minimum: 0.3 // 初始化时的最小百分比

　　})

4.样式在app.vue中全局样式

<style>

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

</style>