vue nprogress进度条插件介绍

实现效果如下：

安装: npm install –save nprogress

用法：

//vue中引用
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

//方法
NProgress.start() - 显示进度条
NProgress.set(0.4) - 设置百分比
NProgress.inc() - 稍微增加
NProgress.done() - 完成进度(进度条消失)

vue 中使用：在路由中添加：

//登录前
router.beforeEach((to, from, next) => {NProgress.start();if (to.path == '/login') {sessionStorage.removeItem('user');}let user = JSON.parse(sessionStorage.getItem('user'));if (!user && to.path != '/login') {next({path: '/login'})} else {next()}
})//登录后
router.afterEach(transition => {NProgress.done();
});

我们在 require.js 中引用，在ajax请求前后添加

//对于axios进行二次封装
import axios from "axios";//start: 进度条开始 done: 进度条结束
import nprogress from "nprogress";
//如果出现进度条没有显示：一定是你忘记了引入样式了
import "nprogress/nprogress.css";
//底下的代码也是创建axios实例
let requests = axios.create({//基础路径baseURL: "/api",//请求不能超过5Stimeout: 5000,
});//请求拦截器----在项目中发请求（请求没有发出去）可以做一些事情
requests.interceptors.request.use((config) => {//现在的问题是config是什么?配置对象//可以让进度条开始动nprogress.start();return config;
});//响应拦截器----当服务器手动请求之后，做出响应（相应成功）会执行的
requests.interceptors.response.use((res) => {//进度条结束nprogress.done();//相应成功做的事情return res.data;},(err) => {alert("服务器响应数据失败");}
);
//最终需要对外暴露（不对外暴露外面模块没办法使用）
//这里的代码是暴露一个axios实例
export default requests;

怎样修改进度条颜色？？

找到 nprogress.css 文件中的样式

vue nprogress进度条插件介绍相关推荐

vue——Nprogress进度条功能实现
下图中的这种顶部进度条是非常常见的,在vue项目中有对应的插件.Nprogress Nprogress进度条的使用方法如下: 1.安装nprogress插件 npm install --save np ...
nprogress 进度条插件使用
每次路由跳转时进行加载,显示在页面最上方,代码书写位置在路由前置守卫里,守卫开始时显示进度条,结束后隐藏 GitHub - rstacruz/nprogress: For slim progress ...
vue实现进度条隐藏_Vue 中使用 NProgress 实现进度条
简介:NProgress 是浏览器加载时,出现在浏览器顶部的进度条. 文章目录: 一.NProgress 安装二.NProgress 使用三.NProgress 配置四.Vue 中修改进度条颜色 ...
NProgress进度条
vue项目中使用的一个进度条插件. 安装使用第三方插件NProgress,添加页面顶部进度条. 使用npm下载: npm install --save nprogress//main.js中进行如下 ...
vue中进度条写法_vue组件实现进度条效果
这篇文章主要为大家详细介绍了vue组件实现进度条效果,具有一定的参考价值,可以用来参考一下. 感兴趣的小伙伴,下面一起跟随512笔记的小编两巴掌来看看吧! 本文实例为大家分享了vue实现进度条效果的具 ...
jq画布插件_超炫HTML 5开发的jQuery进度条插件
今天我们分享一个超酷的使用HTML5画布技术开发的进度条插件 - percentageloader.这个插件比普通的水平进度条使用更加炫酷的效果,图形效果类似以前我们介绍的jQuery knob插件 ...
Process插件：typecho加载页面进度条插件
介绍: typecho加载页面进度条插件这是一款适用于typecho任何主题的加载页面进度条,可以让你的博客加载时显得更加顺滑而不会显得过于突兀,使用本插件可以很好得起到视觉缓冲的作用. 本插件有十 ...
Webpack 插件: webpackbar progress-bar-webpack-plugin 进度条插件分享
Webpack 插件: webpackbar & progress-bar-webpack-plugin 进度条插件分享文章目录 Webpack 插件: webpackbar & p ...
nprogress进度条的使用
nprogress进度条的使用文章目录一.安装所需的包二.使用步骤 1.引入 2.使用 3.修改样式总结一.安装所需的包在项目文件打开终端 npm i nprogress --save 二 ...

vue nprogress进度条插件介绍

vue nprogress进度条插件介绍相关推荐

最新文章

热门文章