簡介：NProgress 是瀏覽器加載時，出現在瀏覽器頂部的進度條。

文章目錄：

一、NProgress 安裝

二、NProgress 使用

三、NProgress 配置

四、Vue 中修改進度條顏色

一、NProgress 安裝

1、使用 npm 或者 yarn 安裝及可

npm install --save nprogress

yarn add nprogress

任選一種安裝

2、用法

NProgress.start(); //進度條出現

NProgress.done(); //進度條消失

二、NProgress 使用

1、路由文件中導入，頁面跳轉出現進度條

入口文件 main.js 引入 nprogress

import App from './App'

import VueRouter from 'vue-router'

import router from './router' // 路由配置文件

//引入 nprogress

import NProgress from 'nprogress' // 進度條

import 'nprogress/nprogress.css' // 引入樣式

Vue.use(VueRouter)

// 簡單配置

NProgress.inc(0.2)

NProgress.configure({ easing: 'ease', speed: 500, showSpinner: false })

// 進度條開始

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

NProgress.start()

next()

})

// 進度條結束

router.afterEach(() => {

NProgress.done()

})

new Vue({

el: '#app',

router,

render: h => h(App)

})

2、寫在 axios 的請求攔截器和響應攔截器里，每次只要觸發 axios 請求就加載進度條

// axios 請求攔截器

axios.interceptors.request.use(

config => {

NProgress.start() // 加載進度條開始

return config

},

error => {

return Promise.reject(error)

}

)

// 在 response 攔截器中，隱藏進度條 NProgress.done()

axios.interceptors.response.use(

response => {

NProgress.done() // 加載進度條結束

return response

},

error => {

return Promise.reject(error)

}

)

三、NProgress 配置

1、showSpinner：進度環顯示隱藏

NProgress.configure({showSpinner: false});

2、ease：調整動畫設置，ease可傳遞CSS3緩沖動畫字符串(如ease、linear 等)。speed為動畫速度(單位ms)

NProgress.configure({ease:'ease',speed:500});

3、minimum：最低百分比

NProgress.configure({minimum:0.3});

4、百分比：通過設置progress的百分比，調用 .set(n)來控制進度，其中n的取值范圍為0-1。

NProgress.set(0.4);

四、Vue 中修改進度條顏色

在App.vue中的style中增加：

#nprogress .bar {

background: red !important; //自定義顏色

}

總結

以上是生活随笔為你收集整理的vue实现进度条隐藏_Vue 中使用 NProgress 实现进度条的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。