Vue顶部进度条工具nprogress使用

NProgress是页面跳转是出现在浏览器顶部的进度条
官网：NProgress: slim progress bars in JavaScript
github：GitHub - rstacruz/nprogress: For slim progress bars like on YouTube, Medium, etc

nprogress安装：

npm install --save nprogress

可以引入进度条的样式修改进度条相关样式代码如下：

import "nprogress/nprogress.css";

nprogress的方法

基本使用：我们可以通过使用start() 以及done()实现进入条的开始和结束基本使用代码如下：

可以用在切换路由的进入和离开顶部进度条展示代码如下：

router.beforeEach((to, from, next) => {nprogress.start()next()
})router.afterEach(() => {nprogress.done()
})

也可以结合你所配置的封装了axios请求拦截器和响应拦截器中使用例子如下：

其中requests是axios的封装函数

import axios from 'axios';
// requests就是axios 下列操作只是配置请求拦截器和响应拦截器const requests=axios.create({//配置对象//基本路径 发请求的时候 路径会出现apibaseURL:"/api",timeout:5000,
})//请求拦截器
requests.interceptors.request.use((config)=>{//进度条开始动nprogress.start();return config;
});//响应拦截器
requests.interceptors.response.use((res)=>{nprogress.done();return res.data;
},(error)=>{return Promise.reject(new Error('faile'));
});export default requests;

默认的进度条样式是蓝色的如下：

如果有需求想修改进度条的样式可以在node_modules中找到nprogress.css文件

修改.bar的颜色就可以修改顶部进度条的颜色

Vue顶部进度条工具nprogress使用相关推荐

vue实现进度条隐藏_Vue 中使用 NProgress 实现进度条
简介:NProgress 是浏览器加载时,出现在浏览器顶部的进度条. 文章目录: 一.NProgress 安装二.NProgress 使用三.NProgress 配置四.Vue 中修改进度条颜色 ...
vue中进度条写法_vue组件实现进度条效果
这篇文章主要为大家详细介绍了vue组件实现进度条效果,具有一定的参考价值,可以用来参考一下. 感兴趣的小伙伴,下面一起跟随512笔记的小编两巴掌来看看吧! 本文实例为大家分享了vue实现进度条效果的具 ...
vue 环形进度条组件封装
子组件circle: <template><div :style="svgStyle"><svg :style="svgStyle" ...
vue 路由进度条 nprogress
阅读目录阐述 1 vue 安装 nprogress 2 路由文件中引入依赖源码 router\index.js 阐述下面看下 Vue 使用 NProgress 的方法 NProgress 是页面 ...
浅谈前端实现页面加载进度条以及 nprogress.js 的实现
以前在 Vue 的项目用了 nprogress 这个插件,一直对于其如何得知加载进度充满好奇,最近又看到了「前端如何实现页面加载进度条」这个问题,今天周六恰好一探究竟.以下仅为一家之言,如有异议,欢迎 ...
小巧的Web进度条组件 - NProgress
NProgress , 小进度条插件, 用于页面载入等待,非常适合Ajax 密集型应用程序. NProgress小巧是因为其JS和CSS文件的总的大小是13K多. NProgress可以适合多种Web ...
vue aplayer 进度条无法拖动_为 Vue 的惰性加载加一个进度条
// 每日前端夜话第412篇// 正文共:1800 字// 预计阅读时间:8 分钟简介通常用 Vue.js 编写单页应用(SPA)时,当加载页面时,所有必需的资源(如 JavaScript 和 ...
vue aplayer 进度条无法拖动_Vue-rideo-player视频播放插件的使用
***** git项目地址: https://github.com/surmon-china/vue-video-player ***** 参考文章: https://www.jianshu.com/ ...
vue实现进度条隐藏_实现带有进度条的Vue延迟加载
下面Vue.js栏目给大家介绍一下给Vue的惰性加载添加进度条的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 简介通常用 Vue.js 编写单页应用(SPA)时,当加载页面 ...

Vue顶部进度条工具nprogress使用

Vue顶部进度条工具nprogress使用相关推荐

最新文章

热门文章