vue项目增加进度条nprogress

1.安装nprogress

cnpm i  nprogress

2.在untils文件夹下创建nprogress.ts文件

 1 import NProgress from 'nprogress';
 2 import 'nprogress/nprogress.css';
 3 
 4 //全局进度条的配置
 5 NProgress.configure({
 6   easing: 'ease', // 动画方式
 7   speed: 1000, // 递增进度条的速度
 8   showSpinner: false, // 是否显示ico
 9   trickleSpeed: 200, // 自动递增间隔
10   minimum: 0.3, // 更改启动时使用的最小百分比
11   parent: 'body', //指定进度条的父容器
12 });
13 //开启进度条
14 export const start = () => {
15   NProgress.start();
16 };
17 //关闭进度条
18 export const done = () => {
19   NProgress.done();
20 };

3.组件中使用，在路由主文件index.ts中引入

 1 import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
 2 import { start, done } from '@/untils/nprogress';
 3 const routes: Array<RouteRecordRaw> = [
 4 ];
 5 
 6 const router = createRouter({
 7   history: createWebHistory(),
 8   routes,
 9 });
10 
11 router.beforeEach((to, from, next) => {
12   start();
14 });
15 router.afterEach(() => {
16   done();
17 });

 

posted @ 2022-12-28 16:50  奔跑的哈密瓜  阅读(514)  评论(0)  编辑  收藏  举报