【Nprogress】页面跳转进度条

参考文档：
【博主：码农键盘上的梦】vue使用Nprogress进度条功能实现
【博主：夜幕506】vue项目的进度条插件 – nprogress
【官方项目地址】https://www.npmjs.com/package/nprogress

介绍

NProgress是一个基于HTML5的JavaScript进度条组件，它提供了一个简单的进度条，可以显示当前的进度。NProgress是一个轻量级的库，具有易于使用的API和易于自定义的样式。

安装

npm install --save nprogress

引入并简单使用

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index.js'
import NProgress from "nprogress";
import 'nprogress/nprogress.css'

const app = createApp(App)
app.use(router)

NProgress.configure({showSpinner: false});
//  路由前置守卫
router.beforeEach((to, from, next) => {
  NProgress.start(); // 进度开始
  console.log('即将进入的路由的信息to:',to);
  console.log('当前即将离开的路由的信息from:',from);
  setTimeout(()=>{
    if(to.name === "user") {
      // next(false); // 拦截不跳转
      next({path: '/home'}); // 拦截跳转到首页
    } else {
      next(); // 不拦截
    }
  },2000)
})
router.afterEach((to, from) => {
  NProgress.done(); // 进度完成
})
app.mount('#app')

基本用法

配置项

通过NProgress.configure()方法进行配置：

属性	说明
minimum	更改启动时使用的最小百分比（默认值：0.08）
template	进度条的HTML模板(默认为<div class=“bar” role=“bar”></div>)
easing	进度条的动画缓动函数（默认值：ease）
speed	进度条完成动画的速度（毫秒）（默认值：200）
trickle	通过将其设置为 false 来关闭自动递增行为 （默认值：true）
trickleSpeed	调整滴流/增量的频率，以毫秒为单位（默认值：200）
showSpinner	通过将其设置为 true 来打开加载微调器（默认值：false）
parent	指定此项可更改父容器（默认值：body）

常用方法

• NProgress.start()：开始显示进度条，进度条从0开始
• NProgress.set(value)：设置进度条的当前值（范围为0到1）
• NProgress.inc()：增加进度条的当前值（默认增加0.1）
• NProgress.done()：完成进度条，进度条到达100%并消失