【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）