vue 添加NProgress进度条插件

NProgress是页面跳转是出现在浏览器顶部的进度条。

官网：NProgress: slim progress bars in JavaScript

安装

npm install nprogress

# 如果使用 ts，还需安装 @types/nprogress
npm install @types/nprogress --save-dev

import 导入后，若提示无法找到。那么，需要在 vue3 ts版本的.env.d.ts中声明一下：declare module ‘nprogress’

路由中使用

import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

router.beforeEach((to, from , next) => {
   NProgress.start();   //每次切换页面时，调用进度条
   next();    //没有 next() 页面不会跳转
});

router.afterEach(() => {
   NProgress.done();   // 在即将进入新的页面组件前，关闭掉进度条
})

封装axios中使用

//在 request 拦截器中显示进度条 Nprogress.start()
axios.interceptors.request.use(config => {
   NProgress.start();   //请求开始时显示进度条
   return config
})

//response中完成进度条 Nprogress.done()
axios.interceptors.response.use(config => {
   NProgress.done();   //服务响应时完成进度条
   return config
})

进度条配置

NProgress.configure({
   easing: 'ease',  // 动画方式，和css动画属性一样（默认：ease）
   speed: 500,  // 递增进度条的速度，单位ms（默认： 200）
   showSpinner: false,  // 是否显示加载ico
   trickle: true,  //是否自动递增
   trickleSpeed: 200,  // 自动递增间隔
   minimum: 0.3,   // 初始化时的最小百分比，0-1（默认：0.08）
   parent: '#container'  //指定此选项以更改父容器（默认：body）
})