安裝依賴
npm i nprogress --save -dev
npm i --save -dev @types/nprogress
src目錄下創(chuàng)建目錄plugins（該目錄存放插件相關(guān)配置）渊鞋，plugins目錄下創(chuàng)建nprogress目錄流纹，nprogress目錄下創(chuàng)建index.ts文件榕酒，內(nèi)容如下
// 文件位置： src/utils/nprogress.ts
// 引入進度條
import NProgress from 'nprogress';
import 'nprogress/nprogress.css';
//全局進度條的配置
NProgress.configure({
easing: 'ease', // 動畫方式
speed: 1000, // 遞增進度條的速度
showSpinner: false, // 是否顯示加載ico
trickleSpeed: 200, // 自動遞增間隔
minimum: 0.3 // 初始化時的最小百分比
});
// 打開進度條
export const start = ()=>{
NProgress.start()
};
// 關(guān)閉進度條
export const close = ()=>{
NProgress.done()
};
API 說明
NProgress.start()
作用：開啟進度條
NProgress.done()
作用：關(guān)閉進度條
NProgress.set(n)
作用：設(shè)置進度條的百分比实苞，其中 n 是 0 ~ 1 之間的數(shù)字剪廉。
NProgress.inc()
作用：以隨機量遞增進度條烈涮，但永遠(yuǎn)不會達(dá)到 100%朴肺。
常見配置
minimum
作用：進度條開始時的百分比（默認(rèn)0.08）
showSpinner
作用：是否顯示右上角螺旋加載提示
parent
作用：設(shè)置父容器（默認(rèn)body）
NProgress.configure({
minimum: 0.08,
showSpinner: true,
parent: '#box1'
})
基礎(chǔ)用法
一般搭配路由使用，頁面跳轉(zhuǎn)前開啟進度條加載動畫坚洽，跳轉(zhuǎn)完成后關(guān)閉加載動畫
import { createRouter, createWebHistory } from "vue-router";
import { start, close } from "/@plugins/nprogress";
//配置路由和組件之間的映射
const routes = [
{
path: "/",
//Login.vue 不可以省略.vue后綴
component: () => import("/@views/user/Login.vue"),
},
];
const router = createRouter({
history: createWebHistory(),
routes,
});
router.beforeEach((to: any, from: any, next: () => void) => {
start();
next();
});
router.afterEach(() => {
close();
});
export default router;
