Vue使用NProgress的操作过程解析

这篇文章主要介绍了Vue使用NProgress的操作过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

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

官网：http://ricostacruz.com/nprogress/

github：https://github.com/rstacruz/nprogress

绿色的进度条就是NProgress实现的效果

安装

$ npm install --save nprogress 或者
$ yarn add nprogress

//用法
NProgress.start();
NProgress.done();

使用

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

router.beforeEach((to, from, next) => {
NProgress.start()
next()
})

router.afterEach(() => {
NProgress.done()
})

在App.vue中的style中增加：

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

以上就是本文的全部内容，希望对大家的学习有所帮助

您可能感兴趣的文章:

• vue配置nprogress实现页面顶部进度条
• Vue使用NProgress进度条的方法
• 在vue项目中使用Nprogress.js进度条的方法
• 基于vue 实现表单中password输入的显示与隐藏功能
• vue自定义表单生成器form-create使用详解
• vue使用video.js进行视频播放功能
• 使用vue实现各类弹出框组件
• 基于Vue SEO的四种方案(小结)