Github: https://github.com/rstacruz/nprogress
基本使用
NProgress.start();
NProgress.done();
浏览器中使用
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://unpkg.com/nprogress@0.2.0/nprogress.js"></script>
<link rel="stylesheet" href="https://unpkg.com/nprogress@0.2.0/nprogress.css"/>
</head>
<body>
<button onclick="handleStartClick()">开始</button>
<button onclick="handleEndClick()">结束</button>
<script>
function handleStartClick() {
NProgress.start();
}
function handleEndClick() {
NProgress.done();
}
</script>
</body>
</html>
Vue中使用
安装
npm install --save nprogress
router.js
//导入
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
router.beforeEach((to, from, next) => {
NProgress.start(); // 显示
next()
})
router.afterEach(() => {
NProgress.done(); // 关闭
})