手机浏览 RSS 2.0 订阅 膘叔的简单人生 , 腾讯云RDS购买 | 超便宜的Vultr , 注册 | 登陆
浏览模式: 标准 | 列表2018年12月13日的文章

vue-nprogress-pjax 插件

 基于昨天写的vue+blade+(vue-pjax-adapter),发现没有任何进度提示,感觉比较不直观,但vue-pjax-adapter不能注入方法(或许是我不会)。

在app.js里引入了nprogress后。在axios请求前尝试注入,比如:
JavaScript代码
  1. window.axios.interceptors.request.use((config) => {  
  2.     console.log(before);  
  3.     NProgress.configure({easing: 'ease', speed: 1000, showSpinner: true});  
  4.     NProgress.start();  
  5.     return config;  
  6. });  
  7. window.axios.interceptors.response.use((response) => {  
  8.     NProgress.done();  
  9.     console.log(after);  
  10.     return response;  
  11. }, (error) => {  
  12.     return Promise.reject(error);  
  13. });  
但是没有看到有任何需求。才尝试修改了一下vue-pjax-adapter插件
用法和vue-pjax-adapter完全一样:
XML/HTML代码
  1. import nPjaxAdapter from 'vue-nprogress-pjax';  
  2. window.Vue.use(nPjaxAdapter);  
  3. /**  
  4.  * 如果不是标准的pjax-container,就是这样使用  
  5.  * // window.Vue.use(nPjaxAdapter, {  
  6.  //     targetSelector: '#my-custom-target',  
  7.  // });  
  8.  */  
就这样简单。现在切换页面有进度条了
 代码在这里:https://www.npmjs.com/package/vue-nprogress-pjax