博客

在平常浏览网页时，我们会注意到在有的网站中，当点击页面中的链接进行路由跳转时，页面顶部会有一个进度条，用来标示页面跳转的进度（如下图所示）。虽然实际用处不大，但是对用户来说，有个进度条会大大减轻用户的等待压力，提升用户体验。本篇文章就来教你如何在Vue项目中实现这样的进度条。

1.安装Nprogress

npm install nprogress -S

2.在router.js中引入Nprogress

import NProgress from 'nprogress' 
import 'nprogress/nprogress.css'// nprogress样式文件

3.绑定路由钩子

//当路由开始跳转时
router.beforeEach((to, from , next) => {
    // 开启进度条
    NProgress.start();
    // 这个一定要加，没有next()页面不会跳转的。这部分还不清楚的去翻一下官网就明白了
    next();
});
//当路由跳转结束后
router.afterEach(() => {  
    // 关闭进度条
    NProgress.done()
})

4.效果图

5.个性化配置

NProgress.configure({     
    easing: 'ease',  // 动画方式    
    speed: 500,  // 递增进度条的速度    
    showSpinner: false, // 是否显示加载ico    
    trickleSpeed: 200, // 自动递增间隔    
    minimum: 0.3 // 初始化时的最小百分比
})