VUEJS实现网页进度条加载效果

VUEJS添加网页进度条加载效果转发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() })

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