Vue中的NProgress

阅读 47

2022-05-30

NProgress 是什么?

      NProgress是页面加载进度条,如下图所示:

Vue中的NProgress_环形进度条 

   NProgress 官方介绍:​​http://ricostacruz.com/nprogress/​​

   NProgress Github代码:​​https://github.com/rstacruz/nprogress​​

 

NProgress 怎么使用?

      1、安装

npm install nprogress --save

      2、导包

import NProgress from 'nprogress' // 进度条
import 'nprogress/nprogress.css' // 进度条样式

      3、对NProgress 进行配置

NProgress.configure({ showSpinner: false }) // NProgress 配置 ,showSpinner: false 表示禁用右边的环形进度条

      4、使用

router.beforeEach(async(to, from, next) => {
console.log("路由跳转之前");
//显示进度条
NProgress.start();

//继续向下执行
next();
});

router.afterEach(() => {
console.log("路由跳转之后");
//结束进度条
NProgress.done();
});

 


精彩评论(0)

0 0 举报