加入 NProgress 显示进度条

在碰到加载数据较大，需要用户等待的情况时，加入一个进度条NProgress会比较明显的改善用户体验

• 1.效果
• 2.使用方式
  • 2.1 安装
  • 2.2 在使用到的地方引入文件
  • 2.3 在每次路由跳转时开始滚动
  • 2.4 在结束路由跳转后结束滚动
  • 2.5 在进度的情况下，也能手动设置 NProgress 的进度，范围 0 ～ 1

1.效果

地址栏下一闪而过的进度条

2.使用方式

2.1 安装

npm install --save nprogress

2.2 在使用到的地方引入文件

import NProgress from "nprogress";
import "nprogress/nprogress.css";

2.3 在每次路由跳转时开始滚动

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

2.4 在结束路由跳转后结束滚动

router.afterEach(() => {
  NProgress.done();
});

2.5 在进度的情况下，也能手动设置 NProgress 的进度，范围 0 ～ 1

NProgress.set(0.4);