Vue路由页面跳转进度条显示&NProgress实现

NProgress使用

可实现如下页面顶部进度条效果

1.安装NProgress包

 npm install --save nprogress

2.导入NProgess包对应的JS和CSS

import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

3.可定义进度条样式

NProgress.configure({  
 easing: 'ease', // 动画方式 
 speed: 500, // 递增进度条的速度 
 showSpinner: false, // 是否显示加载ico 
 trickleSpeed: 200, // 自动递增间隔 
 minimum: 0.3 // 初始化时的最小百分比
})

4.使用

NProgress.start();   //进度条开始
NProgress.done();    //进度条结束
NProgress.inc();     //随机增长进度条，这个方法永远不会让进度条达到100%
NProgress.set(0.0);     // 设置进度，此时相当于NProgress.start();
NProgress.set(0.4);     // 设置进度
NProgress.set(1.0);     // 设置进度，此时相当于NProgress.done();

5.案例

可一在一个vue项目中，路由配置中（router文件夹下，index.js文件中），通过前置路由和后置路由配合使用

//导入包
import NProgress from "nprogress";
import "nprogress/nprogress.css";
//自定义进度样式
NProgress.configure({
  easing: "ease", // 动画方式
  speed: 1500, // 递增进度条的速度
  showSpinner: false, // 是否显示加载ico
  trickleSpeed: 200, // 自动递增间隔
  minimum: 0.3, // 初始化时的最小百分比
});
// 前置路由
router.beforeEach((from, to, next) => {
  //进度条开始
  NProgress.start();
  //随机增加进度
  NProgress.inc();
  console.log("路由跳转");
  next();
});
//后置路由
router.afterEach(() => {
  //关闭掉进度条
  NProgress.done();
  console.log("我来啦");
});