nprogress实现加载进度条

凡大来啦

已于 2023-04-18 16:56:43 修改

阅读量325

点赞数 1

文章标签： javascript vue.js 前端

于 2023-04-18 16:39:20 首次发布

本文链接：https://blog.csdn.net/u011690675/article/details/130225418

版权

文章介绍了如何通过引入NProgress插件并在全局导航守卫中控制，来改善Vue应用中因懒加载组件导致的路由切换延迟问题。通过在路由切换前后启动和结束进度条显示，以及自定义颜色样式，可以提升用户在等待页面加载时的体验。

摘要由CSDN通过智能技术生成

由于都是懒加载的组件，在切换路由的时候需要加载资源，网速不好会 “静止”，甚至出现白页。为了提高用户体验，加上进度条是不错的选择，如下图：

实现步骤：

1. 安装好插件后导入

pnpm add nprogress
# TS环境下才需要添加类型声明文件 (选装)
pnpm add @types/nprogress -D

# 博主书写在了 src / router / index.ts 里面
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

2. 切换路由前开启，也就是全局前置导航守卫里开启

# 只列出核心代码
router.beforeEach((to) => {
  ...
  NProgress.start()
})

3. 路由切换完毕后关闭，也就是全局后置导航守卫里关闭

# 只列出核心代码
router.afterEach((to) => {
  ...
  NProgress.done()
})

4. 修改插件配置

# 博主书写在了 src / router / index.ts 里面
NProgress.configure({
  # 取消插件自带的loading小菊花
  showSpinner: false
})

5. 修改颜色样式

# 博主写在了 src / styles / main.scss 里面
#nprogress .bar {
  background-color: #16c2a3 !important;
}

# 不理解的看下 main.ts 入口文件的引用排序
import { createApp } from 'vue'
import App from '@/App.vue'
import router from '@/router'
// 自定义样式
import '@/styles/main.scss'
const app = createApp(App)
...

End-------------------