vue-cli2.0引入nprogress 进度条

https://blog.csdn.net/qq_40954793/article/details/84957643

1,安装

npm install --save nprogress

2,引入,例如要在切换路由,加载页面时实现进度条

router.beforeEach((to, from, next) => {
  NProgress.start()
  next()
})
 
router.afterEach(() => {
  NProgress.done()
})
3,在进行ajax请求时出现进度条

//interceptors拦截器
Vue.http.interceptors.push((request, next) => {  
  NProgress.start();
 
  next((response)=>{
    NProgress.done();
  });
});

 

posted @ 2020-08-19 15:46  ThisCall  阅读(276)  评论(0编辑  收藏  举报