首页
Javascript
Html
Css
Node.js
Electron
移动开发
小程序
工具类
服务端
浏览器相关
前端收藏
其他
关于
公司注册

vue2.0中使用NProgress进度条

2018年11月02日 发布 阅读(5403) 作者：Jerman

NProgress官网

https://github.com/rstacruz/nprogress/

https://github.com/rstacruz/nprogress/

在vue中如何使用

1.安装

  1. npm install --save nprogress

2、在vue router中设置

  1. import NProgress from 'nprogress/nprogress'
  3. router.beforeEach((to, from, next) => {
  4.     if (from.name !== null) {
  5.         // Start the route progress bar.
  6.         NProgress.start()
  7.     }
  8.     next();
  9. });
  11. router.afterEach((to, from) => {
  12.     NProgress.done()
  13. })

3.别忘了还要引入样式，可在App.vue中引入

  1. <style>
  2. @import '~nprogress/nprogress.css';
  3. </style>

大致就这个样子(蓝色)：

版权声明：本站文章除特别声明外，均采用署名-非商业性使用-禁止演绎 4.0 国际 许可协议，如需转载，请注明出处

© 2018 IMQIANDUAN.COM 粤ICP备18143223号