Vue使用NProgress

PrinciplesMan

已于 2022-05-19 11:03:10 修改

阅读量1k

点赞数

分类专栏： # Vue2.0 文章标签： vue.js javascript 前端

于 2021-08-03 16:01:05 首次发布

原文链接：https://blog.csdn.net/qq_33356585/article/details/92771935

版权

Vue2.0 专栏收录该内容

239 篇文章 18 订阅

订阅专栏

亲测可用，若有疑问请私信

一、NProgress是什么?

简单的说就是加载进度条。

二、安装

bower install --save nprogress
# 或者
npm install --save nprogress
三、用法

//vue中引用
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
//方法
NProgress.start() - 显示进度条
NProgress.set(0.4) - 设置百分比
NProgress.inc() - 稍微增加
NProgress.done() - 完成进度(进度条消失)
四、vue中具体的使用例子

//登录前
router.beforeEach((to, from, next) => {
   NProgress.start();
   if (to.path == '/login') {
       sessionStorage.removeItem('user');
   }
   let user = JSON.parse(sessionStorage.getItem('user'));
   if (!user && to.path != '/login') {
       next({
           path: '/login'
       })
   } else {
       next()
   }
})

//登录后
router.afterEach(transition => {
   NProgress.done();
});
五、效果图

顶部出现红色的进度条，颜色配置是在App.vue中的加入样式，和在main.js中简单的配置

//简单的配置，一般情况speed配置为500
NProgress.inc(0.2)
NProgress.configure({ easing: 'ease', speed: 10000, showSpinner: false })

//样式
#nprogress .bar {
background: red !important; //自定义颜色
}