vue3后台管理 nprogress进度条使用

1、安装

 pnpm install --save nprogress 

2、使用 router/index.js引入

//引入路由对象
import {
  createRouter,
  createWebHashHistory,
  RouteRecordRaw,
} from "vue-router";

import NProgress from "nprogress";
import "nprogress/nprogress.css";
//路由数组的类型 RouteRecordRaw
const routes: Array<RouteRecordRaw> = [
  {
    path: "/",
    component: () => import("../pages/login/login.vue"),
  },
  {
    path: "/home",
    component: () => import("../pages/home/home.vue"),
  },
];

const router = createRouter({
  history: createWebHashHistory(),
  routes,
});

const whileList = ["/"];

router.beforeEach((to, from, next) => {
  let token = localStorage.getItem("token");
  //白名单 有值 或者登陆过存储了token信息可以跳转 否则就去登录页面
  if (whileList.includes(to.path) || token) {
    NProgress.start(); //开启进度条
    next();
  } else {
    next({
      path: "/",
    });
  }
});

 // 导航后置守卫(当你真正进入到某个页面之后才执行)
 router.afterEach((to, from) => {
  NProgress.done(); //进入之后关闭进度条
})

export default router;

在app.vue里修改进度条颜色

 //自定义颜色
 #nprogress .bar {
      background: red !important;
 }