51工具盒子

依楼听风雨
笑看云卷云舒,淡观潮起潮落

Vue中NProgress进度条使用教程

安装

npm安装

npm install --save nprogress

或CDN引入

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

导入

// 导入nprogress.js
import NProgress from 'nprogress';
// 导入nprogress的样式
import 'nprogress/nprogress.css';

使用

// 定义路由导航前置守卫
router.beforeEach((to, from, next) => {
  NProgress.start();
  next();
});
// 定义路由导航后置守卫
router.afterEach((to, from) => {
  NProgress.done();
});

官方地址:https://github.com/rstacruz/nprogress

赞(4)
未经允许不得转载:工具盒子 » Vue中NProgress进度条使用教程