vue使用nprogress加载路由进度条的方法
1、效果图
2、安装
npm install --save nprogress
基本用法
NProgress.start();NProgress.done();
3、在路由中使用
import NProgress from ’nprogress’import ’nprogress/nprogress.css’router.beforeEach((to, from, next) => { NProgress.start(); next();});router.afterEach(() => { NProgress.done();});
PS:下面看下Vue使用NProgress的方法
NProgress是页面跳转是出现在浏览器顶部的进度条
官网:http://ricostacruz.com/nprogress/
github:https://github.com/rstacruz/nprogress
如下图所示,绿色的进度条就是NProgress实现的效果
1、安装
$ npm install --save nprogress 或者$ yarn add nprogress//用法NProgress.start();NProgress.done();
2、使用
//导入import NProgress from ’nprogress’import ’nprogress/nprogress.css’router.beforeEach((to, from, next) => { NProgress.start() next()})router.afterEach(() => { NProgress.done()})
总结
到此这篇关于vue使用nprogress加载路由进度条的文章就介绍到这了,更多相关vue nprogress路由进度条内容请搜索好吧啦网以前的文章或继续浏览下面的相关文章希望大家以后多多支持好吧啦网!
相关文章:
1. Django中的DateTimeField和DateField实现2. 使用JSP实现简单的用户登录注册页面示例代码解析3. Python语言规范之Pylint的详细用法4. 深入分析PHP设计模式5. SpringBoot 开发提速神器 Lombok+MybatisPlus+SwaggerUI6. ASP中RecordSet Open和Connection.Execute一些区别与细节分享7. 如何理解Python中包的引入8. Python 使用 PyQt5 开发的关机小工具分享9. Android View实现圆形进度条10. java操作mongodb之多表联查的实现($lookup)