vue 在浏览器顶部显示进度条

╰半橙微兮° 2023-06-23 13:00 6阅读 0赞

主要借助于 NProgress 插件

> [NProgress][]是页面跳转是出现在浏览器顶部的进度条  
> 官网：[http://ricostacruz.com/nprogress/][NProgress]  
> github：[https://github.com/rstacruz/nprogress][https_github.com_rstacruz_nprogress]

安装：

> $ npm install --save nprogress
> 
> 或者 $ yarn add nprogress

使用：

在main.js中引入：

import NProgress from 'nprogress'; // Progress 进度条
    import 'nprogress/nprogress.css'; // Progress 进度条样式
    
    NProgress.start();
    NProgress.done();
    
    router.beforeEach((to, from, next) => {
    
       /*此处省略大量代码……*/
    
       const browserHeaderTitle = to.name;
        store.commit('SET_BROWSERHEADERTITLE', {
          browserHeaderTitle: browserHeaderTitle
        });
        if (whiteList.indexOf(to.path) !== -1) {
          next();
        } else {
          next('/login'); // 如果没有登录，跳转到智慧云气象门户
          NProgress.done();
        }
    })
    
    router.afterEach(() => {
      NProgress.done()
    })

[NProgress]: http://ricostacruz.com/nprogress/
[https_github.com_rstacruz_nprogress]: https://github.com/rstacruz/nprogress

发表评论取消回复

表情：

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

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

相关阅读

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

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

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

相关 vue 在浏览器顶部显示进度条

主要借助于 NProgress 插件 > [NProgress][]是页面跳转是出现在浏览器顶部的进度条 > 官网：[http://ricostacruz.com/npr

╰半橙微兮°/ 2023年06月23日 13:00/ 0 赞/ 7 阅读

相关 vue 环形进度条

![在这里插入图片描述][20201009093934659.png_pic_center] cnpm install vue-circleprogressbar

客官°小女子只卖身不卖艺/ 2022年12月13日 01:29/ 0 赞/ 257 阅读

相关 java复制文件显示进度条代码_java在复制文件时使用进度条

【实例简介】【实例截图】 ![dae81f37dcdaaba285be789084e52445.png][] 【核心代码】 package com.mingrisof

青旅半醒/ 2022年11月03日 04:12/ 0 赞/ 257 阅读

相关 vue中进度条

最终实现的效果是这样的。 ![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAUG9ubmVudW

梦里梦外;/ 2022年09月12日 12:47/ 0 赞/ 207 阅读

相关 PHPExcel下载进度显示条

下载大量数据到Excel表格时，无法查看下载的实时进度。效果展示： 1、统计数据数量： ![Center][] 2、显示数量： ![Center 1][]

桃扇骨/ 2022年07月12日 02:47/ 0 赞/ 290 阅读

相关 Python实现进度条显示

d=0 for data in range(1,11): time.sleep(0.2) d += 1 done

淡淡的烟草味﹌/ 2022年05月21日 08:40/ 0 赞/ 359 阅读

相关 VUE“粘性”阅读进度条

这个进度条是网上一个实例，原实例使用jQuery实现的[查看][Link 1]，最近在用vue-cli，所以就用vue实现该组件[查看][Link 2]。这个进度条有有意

矫情吗；*/ 2022年05月10日 08:10/ 0 赞/ 196 阅读

相关 VUE项目（单页面）问题之：浏览器刷新，滚动条在顶部

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

小鱼儿/ 2021年09月17日 03:46/ 0 赞/ 297 阅读

相关进度条制作-固定在顶部

进度条制作一、思路分析对于固定在顶部的 loading 动画，我们采用的方式动态改变标签的宽度来实现动画效果，在页面加载一部分后，改变宽度，当加载

痛定思痛。/ 2021年09月16日 21:38/ 0 赞/ 393 阅读