Vue使用NProgress的操作过程解析
更新时间：2019年10月10日 11:11:29 作者：bingxiaoxiao
这篇文章主要介绍了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; //自定义颜色
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
vue3项目,新增弹框连续点击确定按钮防止多次提交,在按钮上添加自定义指令,这篇文章主要介绍了VUE3自定义指令防止重复点击多次提交的实现方法,需要的朋友可以参考下2024-08-08
本文主要介绍了使用vite搭建ssr活动页架构，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-07-07
vue-router的安装不是理想化的,会出现问题,需要静下心认真研究,熬过去就会懂得更多,这篇文章主要给大家介绍了关于vue2安装vue-router报错的解决方法,需要的朋友可以参考下2022-03-03
这篇文章主要介绍了Vue.js directive自定义指令详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下2021-09-09
这篇文章主要介绍了vue中子组件修改父组件数据的相关资料，文中介绍了vue中watch的认识，关于子组件修改父组件属性认识，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2018-06-06
这篇文章主要介绍了在vue项目中配置你自己的启动命令和打包命令方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
使用vue开发的web项目中使用图表,可以使用v-charts,本文主要介绍了vue3中使用Vchart的示例代码,具有一定的参考价值,感兴趣的可以了解一下2024-01-01
这篇文章主要介绍了vue3+ts项目搭建的实现示例,本文目的在于记录自己项目框架搭建的过程,通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习吧2024-03-03
这篇文章主要介绍了Vue中的 v-model组件封装(类似弹窗组件),本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2020-01-01
vue中过滤器的作用可被用于一些常见的文本格式化,也就是修饰文本,但是文本内容不会改变,下面这篇文章主要给大家介绍了关于VUE中filters过滤器的两种用法,需要的朋友可以参考下2022-04-04
最新评论