NProgress---轻量级的前端进度条插件

22x艾克斯

于 2024-10-11 10:27:21 发布

阅读量96

点赞数 2

文章标签：前端

本文链接：https://blog.csdn.net/xllllll___/article/details/142845972

版权

一.介绍

NProgress插件出现在页面的顶部，作为一个进度条，在项目中使用大大优化了用户的体验，一般网站请求接口或者加载一些文件需要使用这种进度条来不断提示用户。

二.方法

1.显示进度条

NProgress.start()//开启进度条显示动画

2.设置进度条加载的百分比

NProgress.set(0.5)//设置进度条的百分比

3.进度条增加一点

NProgress.inc()

4.进度条加载完成

NProgress.done()//加载完成

5.圆圈加载的方式

NProgress.configure({showSpinner: false});//通过设置加载微调器为false来关闭圆圈加载

三.使用

1.安装方式：

npm install nprogress

2.在文件中引入

import NProgress from 'nprogress'
import 'nprogress/nprogress.css'//引入样式

3.可以在路由前置守卫或者路由后置守卫中使用

router.beforeEach(
      async (
        to: RouteLocationNormalized,
        _: RouteLocationNormalized,
        next: any
      ) => {
        NProgress.start()//进度条动画开始
        if (await loginCheckBack(localStorage.getItem('code') as string)) {
          if (to.path === '/login') {
            // 如果已经成功登录，访问登录页面直接跳转到主页
            next('/')
          } else {
            tagStore.addView(to)
            // TODO： 判断是否有权限进入
            next()
          }
        } else {
          // 如果没有登录，先确认目标路径是否在白名单内，白名单内的路径不需要登录状态也可访问
          if (whiteList.indexOf(to.path) !== -1) {
            next()
          } else next(`/login?redirect=${to.path}`)
        }
      }
    )

    router.afterEach((to: RouteLocationNormalized) => {
      // 关闭加载进度
      NProgress.done()

      // 设置标题
      document.title = to.meta.title
    })

NProgress官网：https://ricostacruz.com/nprogress/