切换路由进度条

简介

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

说明

本方式由 Aurorxa 提供推送 #36

版权

提示

本文是在 博主VitePress 文章：《切换路由进度条》 基础上增加了自己实践过程的一些细节，转载无需和我联系，但请注明文章来源。如果侵权之处，请联系博主进行删除，谢谢~

安装

pnpm

pnpm add -D nprogress-v2

yarn

yarn add -D nprogress-v2

npm

npm install nprogress-v2

bun

bun add -D nprogress-v2

配置

在 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);
      };
    }
  },
};

不蒜子统计配置

import { inBrowser } from "vitepress"; //不蒜子统计插件
import busuanzi from "busuanzi.pure.js"; // 导入不蒜子统计插件
import "nprogress-v2/dist/index.css"; // 进度条样式 ]

export default {
  extends: Teek, //teek主题
  async enhanceApp({ app, router }) {//添加router和async
    // 不蒜子环境下配置路由进度条
    if (inBrowser) {
      NProgress.configure({ showSpinner: false });
      router.onBeforeRouteChange = () => {
        NProgress.start(); // 开始进度条
      };
      router.onAfterRouteChanged = () => {
        NProgress.done(); // 停止进度条
      };
    }
  },
};

进度条样式

两种方案一种是改原始代码，另一个改自定义css样式，推荐自定义css样式：

• 路径：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;
}

• 路径：node_modules\.pnpm\nprogress-v2@1.1.10\node_modules\nprogress-v2\dist\index.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%
  );

  position: fixed;
  z-index: 99999;
  top: 0;
  left: 0;

  width: 100%;
  height: 2px;
}

效果

可以参考博主VitePress