vue页面加载时的进度条功能(实例代码)

// 引入
import NProgress from 'nprogress';
import 'nprogress/nprogress.css';
// 进度条配置项这样写
NProgress.configure({
 showSpinner: false
});
// 路由跳转前钩子函数中 - 执行进度条开始加载
router.beforeEach((to, from, next) => {
 NProgress.start();
});
// 路由跳转后钩子函数中 - 执行进度条加载结束
router.afterEach(() => {
 NProgress.done();
});

<script src='nprogress.js'></script>
<link rel='stylesheet' href='nprogress.css'/>

#nprogress .bar {
 background: #00CC00 !important; //自定义颜色
}

// 调用之前如果进度条的状态 50%
NProgress.inc(0.2);
// 调用之后 70%

NProgress.configure({
 minimum: 0.3
});

// 默认模板
NProgress.configure({
 template: "<div class='....'>...</div>"
});

// 举例
NProgress.configure({
 template: "<div class='other-instance'><div role='bar'>更改标记</div></div>"
})

NProgress.configure({
 easing: 'ease',
 speed: 200
});

NProgress.configure({
 trickle: false
});

NProgress.configure({
 trickleSpeed: 200
});

NProgress.configure({
 showSpinner: false,
});

NProgress.configure({
 parent:'#container'
});