NProgress用瀏覽器打開項目,在頁面結構和數據沒有加載顯示之前,頂層就會出現一個進度條,頁面佈局完整顯示進度條會消失
如何使用呢?
===》
先安裝 : npm install --save nprogress 或者 yarn add nprogress
//用法
NProgress.start();
NProgress.done();
//一般在main.js全局導入
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
/*在跳轉之前執行,自己的理解是進入頁面之前*/
router.beforeEach((to, from, next) => {
NProgress.start()
next()
})
/*在跳轉之後判斷,自己的理解是已進入頁面*/
router.afterEach(() => {
NProgress.done()
})
如果你對默認樣式不喜歡,可以在App.vue
中的style
中增加:
#nprogress .bar {
background: red !important; //自定義顏色
}