页面加载进度条（VUE3）

通常我们希望在页面跳转加载中，页面顶部出现进度条。

（1） 下载依赖

npm install nprogress --save

（2）在router中得index.js中引入

import NProgress from 'nprogress'

import 'nprogress/nprogress.css'

 （3）在router中得index.js使用通过路由守卫

 

router.beforeEach((to, from, next) => {

  NProgress.start() // 开始

  next()

})

router.afterEach((to, from) => {

  NProgress.done() // 结束

})

（4）自定义进度条颜色在app.vue页面

 

/* 进度条自定义颜色 */

#nprogress .bar {

  background-color: red !important;

}