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

vue2.0中使用NProgress进度条

2018年11月02日 发布 阅读(5651) 作者: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'
  2. router.beforeEach((to, from, next) => {
  3. if (from.name !== null) {
  4. // Start the route progress bar.
  5. NProgress.start()
  6. }
  7. next();
  8. });
  9. router.afterEach((to, from) => {
  10. NProgress.done()
  11. })

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

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

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

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