PC端页面切换进度条插件nprogress

安装

npm i nprogress

引入

<script src='nprogress.js'></script>
<link rel='stylesheet' href='nprogress.css'/>

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

router.beforeEach((to, from, next) => {
  NProgress.start();
  next();
});
router.afterEach(() => {
  NProgress.done();
});

API

只需nprogress.css根据自己的喜好进行编辑

NProgress.start(); // 开始
NProgress.done(); // 结束
NProgress.remove();
NProgress.set(0.4); // 设置进度百分比 [0,1]
NProgress.inc(); // 递增进度条