【Nprogress】页面跳转进度条
【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%并消失