菜单进度条(nprogress)

安装npm

install i nprogress -- save

引入样式~~~

:global{#nprogress{pointer-events:none;.bar{background:@primary-color;position:fixed;z-index:2048;top:0;left:0;right:0;width:100%;height:2px;}.peg{display:block;position:absolute;right:0;width:100px;height:100%;box-shadow:0010px @primary-color,005px @primary-color;opacity:1;transform:rotate(3deg)translate(0,-4px);}.spinner{display:block;position:fixed;z-index:1031;top:15px;right:15px;}.spinner-icon{width:18px;height:18px;box-sizing:border-box;border:solid2px transparent;border-top-color:@primary-color;border-left-color:@primary-color;border-radius:50%;:local{animation:nprogress-spinner400ms linear infinite;}}}.nprogress-custom-parent{overflow:hidden;position:relative;#nprogress{.bar,.spinner{position:absolute;}}}}

设置加载逻辑

1.设置变量lastHref用户保存最后浏览器地址

2.获取当前浏览器地址 window.location.href

3.编写程序逻辑

当最后记录的浏览器地址不同时，开始加载

当所有页面加载动作完成时，结束加载

const{href}=window.location;if(lastHref!==href){NProgress.start();if(!globalLoading){NProgress.done();lastHref=href;}}