VUEJS添加网页进度条加载效果

原先我是自定义vue模板实现网页loading效果，后面发现体验实在是不怎么好(主要是没有好的加载素材)

于是发现了这款插件
NProgress是一款在网页顶部添加细长进度条的工具，非常轻巧，使用起来也非常便捷，灵感来源于Google, YouTube。

安装

npm install --save nprogress

打开 Router\index.js
添加引用

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

自定义加载进度条的设置

NProgress.configure({
  easing: 'ease', // 动画方式
  speed: 500, // 递增进度条的速度
  showSpinner: false, // 是否显示加载icon
  trickleSpeed: 200, // 自动递增间隔
  minimum: 0.3, // 初始化时的最小百分比
})

最后调用进度条以及设置进度条关闭时间

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

//当路由进入后：关闭进度条
router.afterEach(() => {
  // 在即将进入新的页面组件前，关闭掉进度条
  NProgress.done()
})
原文地址https://qihan.tech/post/2

这样访问每一个页面都会有网页进度条loading效果