nprogress 路由跳转(页面加载)进度条 VUE插件
安装
NPM:
npm install --save nprogress
Yarn:
yarn add nprogress
或者去下载:https://ricostacruz.com/nprogress/
然后直接引用:
<script src='nprogress.js'></script>
<link rel='stylesheet' href='nprogress.css'/>
属性
直接调用 start()或者done()来控制进度条:
NProgress.start();
NProgress.done();
可以通过调用 .set(n)来设置进度,n是0-1的数字:
NProgress.set(0.0);
NProgress.set(0.4);
NProgress.set(1.0);
可以使用inc()随机增长进度条,注意,这个方法永远不会让进度条达到100%。
NProgress.inc();
通过使用done()让进度条关闭。
NProgress.done(true);
使用1 路由跳转时展示进度条 入口文件:main.js
import App from './App'
import VueRouter from 'vue-router'
import router from './router' //你的路由文件
//引入nprogress
import NProgress from 'nprogress'
import 'nprogress/nprogress.css' //这个样式必须引入
Vue.use(VueRouter)
// 简单配置
NProgress.inc(0.2)
NProgress.configure({ easing: 'ease', speed: 500, showSpinner: false })
router.beforeEach((to,from,next) => {
NProgress.start()
next()
})
router.afterEach(() => {
NProgress.done()
})
new Vue({
el: '#app',
router,
render: h => h(App)
})
使用2 在 request 拦截器中,展示进度条
axios.interceptors.request.use(config => {
NProgress.start()
config.headers.Authorization = window.sessionStorage.getItem('token')
NProgress.done()
// 在最后必须 return config
return config
})
样式修改
#nprogress .bar {
background: red !important; //自定义颜色
}