vue項目中使用 nprogress 插件

nprogress 插件是在頁面刷新和跳轉時出現在瀏覽器頂部的進度條，它會隨着頁面的加載而顯示進度狀態。可在官網 查看相關效果。

在vue項目中使用 nprogress 插件

1.安裝：npm install --save nprogress

2.在 src -> utils 文件夾下創建 nprogress.js 文件

import router from '@/router' // 必須引入router
import NProgress from 'nprogress'
import 'nprogress/nprogress.css' // 注意要引入css樣式文件

router.beforeEach((to, from, next) => {
  NProgress.start() // 進度條開始
  next()
})

router.afterEach(() => {
  NProgress.done() // 進度條結束
})

// 進度條的配置項：ease可以設置css3動畫，如ease，linear；speed是進度條從開始到結束的耗時
NProgress.configure({ease:'linear',speed: 500});

3.在 main.js 中引入 nprogress.js 文件

import './utils/nprogress'

4.自定義進度條樣式

​ 在 app.vue 中的 style 中可以自定義進度條的樣式

<style>
  #nprogress .bar {
	background: red !important;
  }
</style>

安裝 nprogress 時報錯，解決方案參考這篇文章

參考文章：https://blog.csdn.net/yxf15732625262/article/details/97319514