效果图：
image.png
1.介绍：
我们在vue项目中，为了减少首屏加载的时间，通常会开启路由的懒加载。路由懒加载配合gizp确实能帮助我们大大的加快首屏的加载时间。然而，路由懒加载会使得我们在第一次打开一个新页面的时候，会有一个加载时间。如果在这个时候我们没有一个提示的话，给人的感觉会是好像我点了页面跳转但是没反应。所以，这个时候我们可以加一个进度条来告知用户。
- 具体实现，我们使用NProgress这个滚动条效果插件。
2.安装
cnpm install --save nprogress
3.配置和引入
新建一个 utils 文件夹，新建一个 nprogress.js 文件
image.png
- nprogress.js
//引入nprogress
import NProgress from 'nprogress'
import 'nprogress/nprogress.css' //这个样式必须引入
NProgress.configure({
easing: 'ease', // 动画方式
speed: 500, // 递增进度条的速度
showSpinner: false, // 是否显示加载ico
trickleSpeed: 200, // 自动递增间隔
minimum: 0.3 // 初始化时的最小百分比
})
export default NProgress;
4.使用
在 route.js 文件引入使用
- route.js
//引入页面加载进度条
import NProgress from '@/utils/nprogress';
.....
const router = new VueRouter({
routes,
// mode: 'history'
})
router.beforeEach((to, from , next) => {
// 每次切换页面时，调用进度条
NProgress.start();
// 这个一定要加，没有next()页面不会跳转的。这部分还不清楚的去翻一下官网就明白了
next();
});
router.afterEach(() => {
window.scrollTo(0,0);
// 在即将进入新的页面组件前，关闭掉进度条
NProgress.done()
})
export default router
5.修改进度条颜色
// 修改进度条颜色 // 1、在App.vue中的style中增加：
nprogress .bar { background: red !important;} (一定要加上!important )
<style lang="less">
#app {
max-width: 100vw;
box-sizing: border-box;
min-height: 100vh;
overflow: hidden;
}
// 修改进度条颜色
// 1、在App.vue中的style中增加：
#nprogress .bar { background: red !important;}
</style>
