vue 實現頁面加載進度條

 

 

第一步，需要安裝插件

cnpm install --save nprogress

第二步，main.js中引入插件。

import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

第三步，在main.js文件配置插件的功能

NProgress.configure({     
    easing: 'ease',  // 動畫方式    
    speed: 500,  // 遞增進度條的速度    
    showSpinner: false, // 是否顯示加載ico    
    trickleSpeed: 200, // 自動遞增間隔    
    minimum: 0.3 // 初始化時的最小百分比
})

第四步，監聽路由跳轉，進入頁面執行插件動畫。

路由跳轉中

router.beforeEach((to, from , next) => {
    // 每次切換頁面時，調用進度條
    NProgress.start();
 
    // 這個一定要加，沒有next()頁面不會跳轉的。這部分還不清楚的去翻一下官網就明白了
    next();
});

跳轉結束了

router.afterEach(() => {  
    // 在即將進入新的頁面組件前，關閉掉進度條
    NProgress.done()
})

 

 

本文轉載自：https://blog.csdn.net/qa60014359/article/details/87688575