vue使用nprogress加载路由进度条的方法
作者:向日葵_简默 时间:2024-05-02 17:02:22
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()
})
来源:https://segmentfault.com/a/1190000022837972
标签:vue,nprogress,进度条
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
IDEA最新激活码永久激活教程附激活失败原因汇总
2023-12-13 11:57:29
![](https://img.aspxhome.com/file/2023/5/131895_0s.png)
浅谈Django中的数据库模型类-models.py(一对一的关系)
2024-01-24 18:32:11
MySQL 视图,第1349号错误
2008-05-18 13:04:00
解决Goland 提示 Unresolved reference 错误的问题
2024-02-07 13:32:26
![](https://img.aspxhome.com/file/2023/2/103732_0s.jpg)
在js中的replace方法详解
2007-08-21 15:47:00
Anaconda下安装mysql-python的包实例
2024-01-25 08:04:29
![](https://img.aspxhome.com/file/2023/0/89050_0s.jpg)
oracle SQL解析步骤小结
2009-09-30 10:46:00
SQLServer 跨库查询实现方法
2024-01-29 02:02:25
python学生管理系统代码实现
2023-10-31 07:55:04
python中的GUI实现计算器
2022-04-18 02:29:05
![](https://img.aspxhome.com/file/2023/1/99091_0s.png)
Python爬虫HTPP请求方法有哪些
2023-07-25 16:55:06
javascript拖拽效果延伸学习
2024-04-16 08:52:24
python3.8下载及安装步骤详解
2023-11-19 18:47:02
![](https://img.aspxhome.com/file/2023/5/123835_0s.png)
Perl中的文件读写学习笔记
2022-07-10 09:13:55
MYSQL实现连续签到功能断签一天从头开始(sql语句)
2024-01-22 16:35:11
![](https://img.aspxhome.com/file/2023/7/126257_0s.png)
在element-ui的select下拉框加上滚动加载
2024-04-17 10:04:14
详解Python打包分发工具setuptools
2022-10-18 02:53:13
![](https://img.aspxhome.com/file/2023/3/103713_0s.png)
如何利用Java正则表达式校验密码规则
2022-07-22 02:05:13
怎么写好一份图形界面设计师简历
2009-04-16 13:10:00
selenium中get_cookies()和add_cookie()的用法详解
2023-10-22 14:27:19