页面跳转进度条Nprogress配置

在项目中页面跳转的时候，一般要使用到跳转的进度条，当然，这只是页面效果的优化，非必须项目。下面就来记录二下在Vue项自中讲度条插件:NProaress的配詈使用

安装

npm install --save nprogress 配置 

在utils文件夹里添加一个 nprogress.js文件用来配置进度条样式

代码如下：

引入NProgress
import NProgress from "nprogress";
import "nprogress/nprogress.css";
//全局进度条的配置
NProgress.configure({
  easing: 'ease', // 动画方式
  speed: 1000, // 递增进度条的速度
  showSpinner: false, // 是否显示加载ico
  trickleSpeed: 200, // 自动递增间隔
  minimum: 0.3, // 更改启动时使用的最小百分比
  parent: 'body', //指定进度条的父容器
});


// 打开进度条
export const start = () => {
  NProgress.start()
}

// 关闭进度条
export const close = () => {
  NProgress.done()
}

修改颜色

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

vue-route导航守卫使用

// 引入进度条import {
start,
close
} from '../utils/nprogress.js'
// 路由跳转拦截器
router.beforeEach((to, from, next) => {start();next();})
router.afterEach((to, from) => {close();})