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;
}