NProgress顶部进度条的用法

大佩梨2023-11-02 15:43

大家打开一个网页的时候，会看到一个进度条，然后加载完成后进度条就消失了。这个呢，就是一个第三方的进度条库，叫做nprogress.

1.首先安装nprogress(咱直接用npm安装了) : 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;    //这里可以随便写颜色

}

如图所示，这样一个进度条就完成了