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
outer.js
//导入 import NProgress from 'nprogress' import 'nprogress/nprogress.css' router.beforeEach((to, from, next) => { NProgress.start(); // 显示 next() }) router.afterEach(() => { NProgress.done(); // 关闭 })
