VUE3项目--路由切换时展示进度条

用户93816912553602025-12-05 16:38

在路由组件切换时，展示进度条。

一、安装进度条插件nprogress

1、安装

官网：www.npmjs.com/package/npr... pnpm intall --save nprogress

2、引入

在要是使用进度条的ts文件中，引入nprogress

javascript 复制代码

// *.ts

// 引入进度条
import nprogress from 'nprogress'
// 引入进度条样式
import 'nprogress/nprogress.css'

3、使用

scss 复制代码

// 进度条开始
nprogress.start()

// 进度条完成
nprogress.done()

二、配置进度条样式

1、修改进度条的背景色

在/node_modules/nprogress/nprogress.css中，修改进度条的背景色

css 复制代码

// nprogress.css

#nprogress .bar {
  /* background: #29d; */
  /* 渐变式背景色 */
  background-image: linear-gradient(to right, red, cyan, yellow, pink);

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

  width: 100%;
  height: 2px;
}