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

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