1 下载nprogress
npm install --save nprogress
2.然后在 router/index.js里写上以下几行代码
import NProgress from "nprogress"; // 导入 nprogress模块
import "nprogress/nprogress.css"; // 导入样式，否则看不到效果
NProgress.configure({ showSpinner: false }); // 显示右上角螺旋加载提示
3.继续，在下面声明完router(const router = new VueRouter({......}))后面写上路由钩子函数如下所示。
router.beforeEach((to, from, next) => {
NProgress.start(); //开启进度条
//中间写其他的项目中所需要的一些代码，例如有些网页只有登录了才能进，在这里可以做出判断，判断完了满足要求后就可以放行 next()
next();
});
router.afterEach(() => {
NProgress.done(); //完成进度条
});
4.这个呢，基本上会这几个api就足够了，我们用的最多的就是这几个，NProgress.start()开启进度条，NProgress.done()完成进度条，如果我们想改变进度条的颜色，可以进入App.vue里，在style中加上下面这样几行代码即可。‘
#nprogress .bar {
background: blue !important; //这里可以随便写颜色
}如图所示，这样一个进度条就完成了
全面学习 大家可以移步 NProgress介绍 文章来源：https://www.toymoban.com/news/detail-724386.html
文章来源地址https://www.toymoban.com/news/detail-724386.html
到了这里，关于NProgress进度条的使用的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
