vue项目中实现页面跳转加载进度条（NProgress插件的使用）

客官°小女子只卖身不卖艺 2024-04-18 20:58 106阅读 0赞

**效果图**  
![在这里插入图片描述][20190911182750480.jpg]  
1、

npm install nprogress --save

2、在router文件的index.js中导入如下代码

import NProgress from 'nprogress'
    import 'nprogress/nprogress.css'

3、设置**全局路由前置守卫**和**全局路由后置钩子**，来实现进度条的显示与完成。

router.beforeEach((to, from, next) => { 
      NProgress.start() // 显示进度条
      next()
    })
    
    router.afterEach(() => { 
      NProgress.done() // 完成进度条
    })

另附上全部代码

// 这两句代码必须放到加载Vue实例的上面。
    import NProgress from 'nprogress' 
    import 'nprogress/nprogress.css'
    
    import Vue from 'vue'
    import Router from 'vue-router'
    import routes from './router'
    
    Vue.use(Router)
    
    const router = new Router({ 
      // mode: 'history',
      // base: process.env.BASE_URL,
      routes
    })
    
    router.beforeEach((to, from, next) => { 
      NProgress.start() // 显示进度条
      next()
    })
    
    router.afterEach(() => { 
      NProgress.done() // 完成进度条
    })
    
    export default router

[20190911182750480.jpg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/832a7b7dc3ae42b08bbc18a52f8736ca.jpg

发表评论取消回复

表情：

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

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

相关阅读

相关 vue项目中实现页面跳转加载进度条（NProgress插件的使用）

*效果图** ![在这里插入图片描述][20190911182750480.jpg] 1、 npm install nprogress --save ...

客官°小女子只卖身不卖艺/ 2024年04月18日 20:58/ 0 赞/ 107 阅读

相关 vue 添加NProgress进度条插件

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

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

相关 vue尚品汇商城项目-day02【vue插件-13.nprogress进度条的使用】

![在这里插入图片描述][201cb7e59bb94276b20be0c55371360b.jpeg_pic_center] 文章目录 13.npro

骑猪看日落/ 2024年03月24日 12:45/ 0 赞/ 154 阅读

相关 nprogress页面加载进度条

入口文件,main.js引入 nprogress import App from './App' import VueRouter from 'vue-rou

ゞ浴缸里的玫瑰/ 2023年10月11日 14:03/ 0 赞/ 119 阅读

相关使用NProgress给页面上方添加进度条

可以借助第三方库NProgress来实现调用接口请求时候，获取数据的动态过程。适用于Vue、React等框架。下面以React举例： 1. 首先需要使用npm进行安装 >

朱雀/ 2022年12月11日 07:51/ 0 赞/ 288 阅读

相关 nprogress页面加载进度条

安装 npm install --save nprogress 使用 NProgress.start(); // 开始 NProgr

蔚落/ 2022年11月26日 01:53/ 0 赞/ 287 阅读

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

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

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

相关 jQuery NProgress.js加载进度插件的简单使用方法

> NProgress是基于jquery的，且版本要 >1.8 。这篇文章主要介绍了NProgress.js加载进度插件的简单使用方法,需要的朋友可以参考下： ![water

矫情吗；*/ 2021年07月26日 19:39/ 0 赞/ 488 阅读

相关 NProgress 进度条插件的使用

NProgress的使用一. NProgress - css 文件和 js 文件下载地址二. 引入 NProgress 的 css文件

Love The Way You Lie/ 2021年07月25日 22:56/ 0 赞/ 698 阅读

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

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

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