手拉手学Vue3(二)：页面跳转进度条Nprogress配置

　　在项目中页面跳转的时候，一般要使用到跳转的进度条，当然，这只是页面效果的优化，非必须项目。下面就来记录一下在Vue项目中进度条插件：NProgress的配置使用。

插件github地址

安装

npm install --save nprogress

配置
在utils文件夹里添加一个nprogress.js文件用来配置进度条样式；代码如下：

// 引入NProgress
import NProgress from "nprogress";
import "nprogress/nprogress.css";


//全局进度条的配置
NProgress.configure({
  easing: 'ease', // 动画方式
  speed: 1000, // 递增进度条的速度
  showSpinner: false, // 是否显示加载ico
  trickleSpeed: 200, // 自动递增间隔
  minimum: 0.3, // 更改启动时使用的最小百分比
  parent: 'body', //指定进度条的父容器
});


// 打开进度条
export const start = () => {
  NProgress.start()
}

// 关闭进度条
export const close = () => {
  NProgress.done()
}

 

　　修改颜色

　　需要修改进度条颜色，可以在通用css文件里加入：

 

#nprogress .bar {
    background: #ffffff !important;
}

 

 

　　vue-route导航守卫使用

　　在router.js里代码如下：

// 引入进度条
import {
    start,
    close
} from '../utils/nprogress.js'

// 路由跳转拦截器
router.beforeEach((to, from, next) => {
　　start();
　　next();
})

router.afterEach((to, from) => {
　　close();
})

　　就这样，效果有了。