vue 進度條 ngprogress axios 攔截器

第一步 安裝：npm install npm install --save nprogress

第二步 引入：在main.js中 注意將css放在main.js的頂部，不然編輯器報錯

import NProgress from 'nprogress'

import 'nprogress/nprogress.css'

同樣在main.js中引入

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

         NProgress.start()

         next()

})

router.afterEach(transition => {

        NProgress.done()

})

有時候我們希望在請求的時候頁面頂部也有進度條加載。這時候需要設置攔截器

在這裏我用的是mintui裏面的加載框。你們可以根據vue-source和axios的不同點進行設置