Vue项目页面跳转时候的，浏览器窗口上方的进度条显示

1.安装

cnpm install --save nprogress

2.在router.js中引入Nprogress

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

3.4.绑定路由钩子
我们想要的效果是：当路由开始跳转时加载进度条，当路由跳转完毕时进度条加载完毕。幸运的是，在Vue中刚好为我们提供了路由开始跳转和结束跳转的钩子，我们只需在引入Nprogress之后，将其绑定在路由钩子上即可。代码如下：

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