vue3 页面跳转 顶部进度条

背景

vue3 页面跳转 顶部进度条； 在做后台管理系统的时候，需要加一个页面跳转的进度条；

在研究之后决定用 nprogress，这个比较简单

方案

npm install nprogress --save

import Nprogress from 'nprogress';
import 'nprogress/nprogress.css';

const router = createRouter({
    history: createWebHistory(),
    routes,
});
router.beforeEach((to, from, next) => {
    Nprogress.start();
    next();
});
router.afterEach((to, from) => {
    Nprogress.done();
});

假如需要修改颜色

#nprogress .bar {

  background-color: red !important;

}