路由跳转进度条Nprogress使用

最新推荐文章于 2024-10-09 10:13:02 发布
最新推荐文章于 2024-10-09 10:13:02 发布
阅读量202 收藏
点赞数 1
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_71677887/article/details/128557386
版权
文章介绍了如何通过npmjs搜索并安装Nprogress包，然后在项目中导入并使用Nprogress来实现页面加载的进度条功能。在router的beforeEach和afterEach钩子中调用Nprogress的start()和done()方法以控制进度条的开始和结束。
摘要由CSDN通过智能技术生成

解法：

1. 直接进npmjs网站搜Nprogress包即可

2.下载： 

 npm install --save nprogress

3.使用：

import Nprogress from 'nprogress'
// 记得导入样式
import 'nprogress/nprogress.css'

使用进度条时记得导入样式
NProgress.start(); //一般在router.beforeEach中开启

NProgress.done();//一般在router.afterEach中使用； 关闭进度条

 

老罗专注摸鱼
关注
非常好看的进度条，到100%时候跳转页面
05-12
非常好看的进度条，到100%时候跳转页面或者可以用来模拟上传操作
Nprogress——页面加载的虚假进度条
热门推荐
诸葛韩信--一个前往前端不归路的浪子
06-16 4万+
Nprogress是一个比较简单的页面加载用进度条（其实也可以用作接口加载进度，或者其它处理加载进度样式）。简单而代码又少。实用度比较高。 **1、Nprogress的原理** Nprogress的原理非常简单，就是页面启动的时候，构建一个方法，创建一个div，然后这个div靠近最底部，用fixed定位住，至于样式就是按照自个或者默认走了。 相信很多小伙伴都知道，一个页面或者一个接口的进度计算是非常复杂的，即便能够计算出来，那么消耗的性能终究是非常大的，这个时候虚假的进度条的作用就显示它的强大了。一开始进入
Nprogress实现路由加载进度[React+Vue]
doublewhite233的博客
04-22 1383
文章目录1. Nporgress2. React中的使用3. Vue中的使用 1. Nporgress 在很多网页的加载过程中，顶部都会展示一个进度条来显示加载进度。Nprogress 就是一款非常方便的进度条插件，其主要用法为： NProgress.start() — 开始 NProgress.set(0.4) — 设置百分比 NProgress.inc() — 随机增长进度条（不会到达100%） NProgress.done() — 完成 2. React中的使用 在切换页面时出现进度条，本质就是
vue3 路由跳转页面加载进度条
lhz_333的博客
06-30 3331
在 vue 项目中使用 nprogress，切换路由页面时，在页面顶部加载一个进度条，用来标识页面跳转的进度。
Vue路由页面跳转进度条显示&NProgress实现
qq_54334713的博客
09-28 1010
NProgress使用
Vue使用NProgress进度条的方法
10-16
以下是关于Vue结合NProgress使用方法的详细知识点： 1. 安装NProgress 在项目中安装NProgress非常简单，只需要通过npm来安装NProgress库即可。在命令行中运行以下命令： ``` npm install --save nprogress ``` 或者...
Vue项目页面跳转时浏览器窗口上方显示进度条功能
10-15
在Vue项目中，为了提升用户体验，我们经常需要在页面跳转时显示浏览器窗口上方的进度条，以指示页面加载状态。这种功能可以帮助用户感知页面正在加载，减少他们因等待而产生的不耐烦感。实现这一功能，我们可以借助...
在vue项目中使用Nprogress.js进度条的方法
10-18
例如，可以在`router.beforeEach`中判断是否需要显示进度条，并在路由跳转开始时调用`NProgress.start()`，在`router.afterEach`中调用`NProgress.done()`结束进度条显示： ```javascript router.beforeEach((to, ...
vue使用nprogress实现进度条
12-13
本文实例为大家分享了vue使用nprogress...//使用钩子函数对路由进行权限跳转 router.beforeEach((to, from, next) => { const role = localStorage.getItem('ms_username'); if(!role && to.path !== '/login'){
vue配置nprogress实现页面顶部进度条
10-16
然后，在路由跳转后执行的全局后置钩子`afterEach`中结束进度条的显示。 值得注意的是，上述代码中的`base`变量是一个路由配置项，它应该根据项目中的路由配置进行相应修改。`base`变量的值通常用来表示应用的基础...
html+js 页面跳转进度条
weixin_34062469的博客
09-04 1033
完整源码：http://yuncode.net/code/c_5045e1288109d77 效果图： 代码预览： <HTML><HEAD><TITLE>云代码</TITLE><SCRIPTtype=text/javascript><!-- varie5=(d...
进度条跳转
qq_40585763的博客
10-12 443
final ProgressDialog dialog = new ProgressDialog(this);                 dialog.setProgressStyle(ProgressDialog.STYLE_HORIZONTAL);// 设置水平进度条                 dialog.setCancelable(true);// 设置是否可以通过点击Ba
实现几秒后跳转到另一页面JS
wangjin161的专栏
01-21 3704
<br />：<html xmlns="http://www.w3.org/1999/xhtml"> <br /><head> <br /><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <br /><title>Loading</title> <br /></head> <br /><body> <br /><form name="loading"> <br /><p align="center">正在跳转，请稍
跳转界面加载 进度条
陌的专栏
10-19 2061
using UnityEngine; using System.Collections; using UnityEngine.UI; public class LoadingScripts : MonoBehaviour { public GameObject objProcessBar; // Use this for initialization void Star
Vue中使用nprogress顶部进度条
LittlePanger's Blog
04-13 293
实现顶部加载进度条 安装nprogress npm install --save nprogress 在main.js中引入,设置 import NProgress from 'nprogress' import 'nprogress/nprogress.css' //进度条 NProgress.inc(0.2); NProgress.configure({ easing: 'ease',...
腾讯IM SDK：TUIKit发送多张图片
最新发布
q1003675852的博客
10-09 438
本文记录腾讯IM SDK：TUIKit发送多张图片的实现方法
【Vue】a-radio-group单选框数字与字符串回显问题
叶为正的博客
10-08 289
根据后端接口返回数字或字符串，来配置Ant Design of Vue中a-radio-group单选框的回显问题，注意value中的取值是不一样的。
export function formatRouter(data) { return data.map((item) => { let i = 0; const route = { name: item.menuName, path: item.menuPath, component: import(`../${item.component}.vue`), children: [] } if (item.children && item.children.length > 0) { route.children = formatRouter(item.children) } return route }) } router.beforeEach((to, from, next) => { // 开启进度条 NProgress.start() next() }) router.afterEach((to, from) => { // 关闭进度条 NProgress.done() }) export default router
06-10
这段代码是关于路由的，主要包括两个部分。 第一部分是 `formatRouter` 函数，它的作用是将菜单数据转换为路由配置。传入一个菜单数据数组，每个菜单项包括菜单名、路径、组件以及可能的子菜单。函数通过递归调用自身来处理子菜单，并返回一个路由配置数组。 第二部分是关于路由导航守卫的代码。在 `beforeEach` 中，它会开启一个进度条，然后直接调用 `next` 函数，表示可以继续跳转到下一个路由；在 `afterEach` 中，它会关闭进度条。这些代码可以用于在路由跳转时显示进度条，提升用户体验。 总的来说，这段代码是为了实现一个前端路由，将菜单数据转换为路由配置，并提供路由导航守卫来控制路由跳转时的进度条显示。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值