vue项目中使用的一个进度条插件。

安装

使用第三方插件NProgress，添加页面顶部进度条。

使用npm下载：

npm install --save nprogress//main.js中进行如下配置：
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

使用

NProgress.start();//开始
NProgress.done();//结束

案例

下边的例子中，在拦截器中开启、关闭第三方进度条插件NProgress，给丰富页面效果。在发起axios（Ajax）请求时，请求拦截器中开启，响应拦截器中结束。

// request（请求）拦截器
// 请求在到达服务器之前，先会调用use中的这个回调函数
axios.interceptors.request.use(config => {NProgress.start();//进度条return config;//在最后必须 return config
})
// response（响应）拦截器中,  隐藏进度条NProgress.done()
axios.interceptors.response.use(config => {NProgress.done();return config;
})

扩展：

在发起Ajax请求时往config中添加一个变量，可用于判断是否显示进度条动画。详情见Axios笔记。

NProgress进度条相关推荐

nprogress进度条的使用
nprogress进度条的使用文章目录一.安装所需的包二.使用步骤 1.引入 2.使用 3.修改样式总结一.安装所需的包在项目文件打开终端 npm i nprogress --save 二 ...
NProgress 进度条
NProgress 实现进度条 NProgress 是浏览器加载时,出现在浏览器顶部的进度条. 参考文章@小丶侯参考文章@CEZLZ 一.安装 npm install --save nprogres ...
vue——Nprogress进度条功能实现
下图中的这种顶部进度条是非常常见的,在vue项目中有对应的插件.Nprogress Nprogress进度条的使用方法如下: 1.安装nprogress插件 npm install --save np ...
插件——nprogress进度条
一,安装 npm install nprogress --save npm install nprogress --save 二,在需要使用的页面引入这里也要引入axios 在请求拦截器的时候使用 ...
VUE项目--nprogress进度条
安装 npm install --save nprogress 引入在src/api/requests.js文件中引入 // 引入进度条 import nprogress from 'nprogre ...
Vue使用NProgress进度条 zindex
1.安装 npm i -S nprogress 2.在router.js中使用 import Vue from 'vue' import Router from 'vue-router' import ...
vue nprogress进度条插件介绍
实现效果如下: 安装: npm install –save nprogress 用法: //vue中引用 import NProgress from 'nprogress' import 'nprog ...
Vue.js中使用nprogress进度条
安装 npm install --save nprogress 简单使用 router目录下,index.js 引入 import NProgress from 'nprogress' import ...
nprogress 进度条插件使用
每次路由跳转时进行加载,显示在页面最上方,代码书写位置在路由前置守卫里,守卫开始时显示进度条,结束后隐藏 GitHub - rstacruz/nprogress: For slim progress ...

NProgress进度条

安装

使用

案例

NProgress进度条相关推荐

最新文章

热门文章