配置切页切换导航条

配置切页切换导航条

目录

• 配置切页切换导航条
• 目录
• 版权
• 效果
• 配置

[toc]

版权

Hyde大佬的《切换路由进度条》 ，感谢大佬。💖💖💖

效果

配置

当你切换页面，顶部会显示进度条，使用的是 @Skyleen77/nprogress-v2

说明

本方式由 Aurorxa 提供推送 #36

（1）安装插件

pnpm add -D nprogress-v2

（2）在 docs\.vitepress\theme\index.ts 中配置

非 SSR 环境下配置

import { NProgress } from "nprogress-v2/dist/index.js"; // 进度条组件
import "nprogress-v2/dist/index.css"; // 进度条样式

export default {
  extends: Teek, //teek主题
  async enhanceApp({ app, router }) {//添加router和async
    // 非SSR环境下配置路由进度条
    // @ts-ignore-error
    if (!import.meta.env.SSR) {
      NProgress.configure({ showSpinner: false });
      router.onBeforeRouteChange = () => NProgress.start();
      router.onAfterRouteChange = () => {
        setTimeout(() => {
          NProgress.done();
        }, 100);
      };
    }
  },
};

（3）修改进度条样式

编辑：docs\.vitepress\theme\style\var.scss,添加以下代码

/* 自定义css样式 */
// 切换路由进度条颜色样式
.nprogress .bar {
  background: linear-gradient(
    114.2deg,
    rgba(184, 215, 21, 1) -15.3%,
    rgba(148, 187, 233, 1) 14.5%,
    rgba(21, 215, 182, 1) 38.7%,
    rgba(129, 189, 240, 1) 58.8%,
    rgba(219, 108, 205, 1) 77.3%,
    rgba(240, 129, 129, 1) 88.5%
  ) !important;
}

（4）运行验证。

结束。