Vue中的NProgress

Bertha 。 2022-01-13 02:35 275阅读 0赞

**NProgress 是什么？**

**      **NProgress是页面加载进度条，如下图所示:

![20190618093325551.gif][]

NProgress 官方介绍：[http://ricostacruz.com/nprogress/][http_ricostacruz.com_nprogress]

NProgress Github代码：[https://github.com/rstacruz/nprogress][https_github.com_rstacruz_nprogress]

**NProgress 怎么使用？**

1、安装

npm install nprogress --save

2、导包

import NProgress from 'nprogress' // 进度条
    import 'nprogress/nprogress.css' // 进度条样式

3、对NProgress 进行配置

NProgress.configure({ showSpinner: false }) // NProgress 配置 ，showSpinner: false 表示禁用右边的环形进度条

4、使用

router.beforeEach(async(to, from, next) => {
      console.log("路由跳转之前");
    //显示进度条
      NProgress.start();
    
      //继续向下执行
      next();
    });
    
    router.afterEach(() => {
      console.log("路由跳转之后");
    //结束进度条
      NProgress.done();
    });

[20190618093325551.gif]: /images/20220112/066d18113c0041728ef6f5be12e68082.png
[http_ricostacruz.com_nprogress]: http://ricostacruz.com/nprogress/
[https_github.com_rstacruz_nprogress]: https://github.com/rstacruz/nprogress

发表评论取消回复

表情：

评论列表（有 0 条评论，275人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue 添加NProgress进度条插件

NProgress NProgress是页面跳转是出现在浏览器顶部的进度条。官网：[http://ricostacruz.com/nprogress][http_ri

悠悠/ 2024年04月07日 12:04/ 0 赞/ 71 阅读

相关 Vue 集成Nprogress.js进度条

Nprogress.js: 超小的全局顶部进度条 Nprogress.js如何使用安装 cnpm i nprogress -S 引包

亦凉/ 2023年10月10日 11:54/ 0 赞/ 42 阅读

相关 Vue系列之顶部进度条（NProgress）

一、Vue顶部进度条（实战） 1、安装nprogress插件 1. 本地引入 <script src='nprogress.js'></script>

秒速五厘米/ 2023年07月06日 11:45/ 0 赞/ 54 阅读

相关 NProgress

npm install --save nprogress router.js import NProgress from 'nprogress'

╰+攻爆jí腚メ/ 2022年09月11日 10:16/ 0 赞/ 162 阅读

相关 Vue使用NProgress

适用于Ajax 类型应用程序的超薄进度条安装NProgress包方法一： npm install --save nprogerss 方法二：在图形化界面中搜

╰半夏微凉°/ 2022年09月02日 12:48/ 0 赞/ 142 阅读

相关 vue——Nprogress进度条功能实现

下图中的这种顶部进度条是非常常见的，在`vue`项目中有对应的插件。`Nprogress` ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5n

傷城~/ 2022年08月31日 15:15/ 0 赞/ 903 阅读

相关 Vue 使用nprogress

这个问题做一个简单的记录。当下用的vue 和 vue-router 版本都是 2.0 入口文件,main.js引入 nprogress ... im

妖狐艹你老母/ 2022年07月14日 13:27/ 0 赞/ 155 阅读

相关 Vue中的NProgress

NProgress 是什么？ NProgress是页面加载进度条，如下图所示: ![20190618093325551.gif][] NProgres

Bertha 。/ 2022年01月13日 02:35/ 0 赞/ 276 阅读

相关关于nprogress和bootstrap的paginator

nprogress 进度条，一般用于发出ajax请求时使用引入文件 <link rel="stylesheet" href="assets/nprogre

野性酷女/ 2021年12月07日 13:13/ 0 赞/ 210 阅读

相关在vue中使用进度条插件nprogress

一，安装nprogress cnpm i -S nprogress 二，在router/index.js中引入 import NProgress

- 日理万妓/ 2021年07月25日 11:18/ 0 赞/ 1001 阅读